import styled from "@emotion/styled";
import {Box, Stack, Tag, Text} from "@chakra-ui/react";
import {Tooltip} from "../components/tooltip";
import {useAppStore} from "../appstore";

const PasteZoneStyled = styled(Stack)`
    width: 100%;
    height: 100%;
    border: 1px dashed #BFDBFE;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem;
    border-radius: 4px;
`

function td(text: string) {
  return <Box as="td" borderWidth="1px" px="2" py="1">{text}</Box>
}

export function PasteZone() {
  const {parseMode} = useAppStore();

  const selectionTypeTooltip = <Box as="table" borderWidth="1px" borderCollapse="collapse" fontSize="sm">
    <Box as="tbody">
      <Box as="tr">
        {td('SKU_1')}
        {td('5')}
      </Box>
      <Box as="tr">
        {td('SKU_2')}
        {td('10')}
      </Box>
    </Box>
  </Box>

  const fullTypeTooltip = <Box as="table" borderWidth="1px" borderCollapse="collapse" fontSize="sm">
    <Box as="thead">
      <Box as="tr">
        {td('SKU')}
        {td('Quantity')}
      </Box>
    </Box>
    <Box as="tbody">
      <Box as="tr">
        {td('SKU_1')}
        {td('5')}
      </Box>
      <Box as="tr">
        {td('SKU_2')}
        {td('10')}
      </Box>
    </Box>
  </Box>

  const tooltipContent = parseMode === 'selection'
    ? selectionTypeTooltip : parseMode === 'full'
      ? fullTypeTooltip
      : <Stack>
        {fullTypeTooltip}
        <Box>or</Box>
        {selectionTypeTooltip}
      </Stack>;

  return (
    <PasteZoneStyled>
      <Stack direction="column" gap="0.5rem" textAlign="center">
        <Text textStyle="md" fontWeight="bolder">
          Paste &nbsp;
          <Tooltip content={tooltipContent} positioning={{ placement: "right-bottom" }}>
            <Tag.Root _hover={{bg: "blue.100"}} color="black" size="lg" colorPalette="blue" variant="outline" fontWeight="medium">
              <Tag.Label>(SKU, Quantity)</Tag.Label>
            </Tag.Root>
          </Tooltip>
          &nbsp;spreadsheet selection here.
        </Text>
        <Text textStyle="sm" color="gray.600">
          Or import from CSV/TSV file
        </Text>
      </Stack>
    </PasteZoneStyled>
  )
}