import { HStack, Button } from "@chakra-ui/react";
import React from "react";
import DemoStickers from "../stickers/DemoStickers";

interface StickerSelectorProps {
  stickerSet: "Demo";
  currSticker: StickerVal;
  selectedSticker: StickerVal;
  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
}

const StickerSelector = ({
  stickerSet,
  currSticker,
  selectedSticker,
  updateSelectedSticker
}: StickerSelectorProps): JSX.Element => {
  const stickers = {
    Demo: (
      <HStack
        w="100%"
        h="auto"
        justifyContent={"center"}
        alignContent={"center"}
        spacing={14}
      >
        <Button
          isDisabled={currSticker >= 1}
          border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
          bg={selectedSticker === 1 && "gray.800"}
          onClick={() => updateSelectedSticker(1)}
          variant="stickerButton"
        >
          <DemoStickers stickerVal={1} />
        </Button>
        <Button
          isDisabled={currSticker === 0}
          border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
          bg={selectedSticker === 0 && "gray.800"}
          onClick={() => updateSelectedSticker(0)}
          variant="stickerButton"
        >
          <DemoStickers stickerVal={0} />
        </Button>
        <Button
          isDisabled={currSticker <= -1}
          border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
          bg={selectedSticker === -1 && "gray.800"}
          onClick={() => updateSelectedSticker(-1)}
          variant="stickerButton"
        >
          <DemoStickers stickerVal={-1} />
        </Button>
      </HStack>
    )
  };

  return stickers[stickerSet];
};

export default StickerSelector;