import SmallAddPluse from "@/assets/icons/SmallAddPluse";
import AddEmoji from "@icons/questionsPage/addEmoji";
import PlusImage from "@icons/questionsPage/plus";
import { Box, useTheme, IconButton } from "@mui/material";
import { MouseEventHandler } from "react";

export default function VariantAdornment({
  onClick,
  extendedText,
  clearEmoji,
}: {
  onClick: MouseEventHandler<HTMLDivElement>;
  extendedText: string;
  clearEmoji: () => void;
}) {
  const theme = useTheme();

  return (
    <Box sx={{ cursor: "pointer" }}>
      <Box data-cy="choose-emoji-button" onClick={onClick}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            gap: "5px",
          }}
        >
          {extendedText ? (
            <Box
              sx={{
                height: "40px",
                width: "60px",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                background: "#EEE4FC",
                borderRadius: "3px",
              }}
            >
              <Box
                sx={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                {extendedText}
              </Box>
              <IconButton 
              onClick={clearEmoji}
              sx={{
                height: "100%",
                width: "20px",
                borderRadius: "0 3px 3px 0",
                bgcolor: theme.palette.brightPurple.main
              }}>
                <SmallAddPluse 
                sx={{
                  transform: extendedText ? "rotate(45deg)" : ""
                }}
                />
              </IconButton>
            </Box>
          ) : (
            <AddEmoji />
          )}
        </Box>
      </Box>
    </Box>
  );
}
