import { Box, Text, Image } from "@chakra-ui/react";
import { defineComponent } from "@qorebase/app-component";
import Barcode from "react-barcode";

export default defineComponent({
  name: "Barcode Generator",
  type: "record",
  icon: "Barcode",
  group: "media",
  display: "block",
  defaultProps: {
    title: "Barcode Generator",
    description: "Description here",
    code: "QoreApp",
    displayCode: false,
    style: "ghost",
    format: "CODE128",
  },
  propDefinition: {
    title: { group: "Design", type: "expression", options: {} },
    description: {
      group: "Design",
      type: "expression",
      options: {},
    },
    code: { group: "Design", type: "expression", options: {} },
    displayCode: {
      group: "Design",
      type: "boolean",
      options: { format: "boolean" },
    },
    style: {
      group: "Design",
      type: "string",
      options: {
        format: "select",
        options: [
          ...["ghost", "solid"].map((item) => ({
            label: item,
            value: item,
          })),
        ],
      },
    },
    format: {
      group: "Design",
      type: "string",
      options: {
        format: "select",
        options: [
          {
            label: "CODE 128",
            value: "CODE128",
          },
          // {
          //   label: "EAN 13",
          //   value: "EAN13",
          // },
          // {
          //   label: "EAN 8",
          //   value: "EAN8",
          // },
          {
            label: "CODE 39",
            value: "CODE39",
          },
          // {
          //   label: "CODABAR",
          //   value: "CODABAR",
          // },
          // {
          //   label: "UPC",
          //   value: "UPC",
          // },
        ],
      },
    },
  },
  Component: (props) => {
    const title = props.hooks.useEvaluate(props.properties.title);
    const desc = props.hooks.useEvaluate(props.properties.description);
    const code = props.hooks.useEvaluate(props.properties.code);
    const format = props.hooks.useEvaluate(props.properties.format);

    return (
      <Box w="100%" h="100%" flex="1">
        <Box
          padding="16px"
          borderRadius="4px"
          backgroundColor={
            props.properties.style === "solid"
              ? props.app.theme.options.primaryColor
              : "transparent"
          }
          display="flex"
          width="100%"
          justifyContent="center"
          flexDir="column"
          alignItems="center"
        >
          {props.properties.style === "solid" && (
            <Image
              src="/assets/ilustration/component-card-illustration.svg"
              alt=""
              position="absolute"
              top="0"
              right="0"
            />
          )}
          <Text
            fontWeight="bold"
            size="26px"
            color={props.properties.style === "solid" && "white"}
            noOfLines={1}
            // data-test="barcode-title"
          >
            {title}
          </Text>
          <Text
            fontWeight="normal"
            size="16px"
            mb={4}
            color={props.properties.style === "solid" && "white"}
            noOfLines={1}
            // data-test="barcode-desc"
          >
            {desc}
          </Text>
          <Barcode
            background={
              props.properties.style === "solid"
                ? props.app.theme.options.primaryColor
                : "transparent"
            }
            lineColor={
              props.properties.style === "solid"
                ? "#fff"
                : props.app.theme.id === "Light"
                ? "var(--chakra-colors-text-1000)"
                : "var(--chakra-colors-text-900)"
            }
            value={code || "QoreApp"}
            size={100}
            format={format || "CODE128"}
            // data-test="barcode-image"
          />
          <Text
            color={props.properties.style === "solid" ? "white" : "gray.500"}
            fontWeight="normal"
            size="14px"
            display={!props.properties.displayCode && "none"}
            mt={2}
            // data-test="barcode-credit"
          >
            {code || "QoreApp"}
          </Text>
        </Box>
      </Box>
    );
  },
});