"use client"

import LabelContent from "@/components/label"
import { useAppLayoutStore } from "@/components/layout/store"
import { Breadcrumbs, Flex, Paper, Stack, UnstyledButton } from "@mantine/core"
import { useMemo } from "react"

export default function ComponentLabelPicturePage() {
  const items = [{ title: "地图展示" }].map((item) => (
    <UnstyledButton key={item.title}>{item.title}</UnstyledButton>
  ))
  const { isOpen } = useAppLayoutStore()
  let leftWidth = useMemo(() => {
    let width = 69
    return !isOpen ? width : width + 160
  }, [isOpen])
  return (
    <>
      <Stack w="100%" h="calc(100vh - 56px)" p={"md"}>
        <Flex justify={"space-between"} align={"center"} h={"16px"}>
          <Breadcrumbs>{items}</Breadcrumbs>
        </Flex>
        <Paper
          shadow="xs"
          p="0"
          flex={1}
          display="flex"
          style={{
            overflow: "hidden",
          }}>
          <LabelContent
            headerHeight={128}
            leftWidth={leftWidth}
            project_id={1}
            task_id={3}
          />
        </Paper>
      </Stack>
    </>
  )
}