import { useState } from "react";
import {
  Box,
  FormControl,
  MenuItem,
  Select,
  SelectChangeEvent,
  Typography,
  useTheme,
} from "@mui/material";

import ArrowDownIcon from "@icons/ArrowDownIcon";

import type { QuizQuestionSelect } from "model/questionTypes/select";
interface Props {
  question: QuizQuestionSelect;
}

export default function Text({ question }: Props) {
  const theme = useTheme();
  const [selectValue, setSelectValue] = useState<string>("");

  function handleChange(event: SelectChangeEvent<string | null>) {
    setSelectValue((event.target as HTMLInputElement).value);
  }

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
      }}
    >
      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
      <FormControl
        fullWidth
        size="small"
        sx={{
          width: "100%",
          minWidth: "200px",
          height: "48px",
        }}
      >
        <Select
          id="category-select"
          variant="outlined"
          value={selectValue}
          placeholder={question.content.default}
          displayEmpty
          onChange={handleChange}
          data-cy="select"
          sx={{
            height: "48px",
            borderRadius: "8px",
            "& .MuiOutlinedInput-notchedOutline": {
              border: `1px solid ${theme.palette.brightPurple.main} !important`,
            },
          }}
          MenuProps={{
            PaperProps: {
              sx: {
                mt: "8px",
                p: "4px",
                borderRadius: "8px",
                border: "1px solid #EEE4FC",
                boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
              },
            },
            MenuListProps: {
              sx: {
                py: 0,
                display: "flex",
                flexDirection: "column",
                gap: "8px",
                "& .Mui-selected": {
                  backgroundColor: theme.palette.background.default,
                  color: theme.palette.brightPurple.main,
                },
              },
            },
          }}
          inputProps={{
            sx: {
              color: theme.palette.brightPurple.main,
              display: "flex",
              alignItems: "center",
              px: "9px",
              gap: "20px",
              "& + input": !selectValue && {
                border: "none",
                transform: "translateY(-50%)",
                top: "50%",
                left: "10px",
                opacity: 1,
                color: "#333",
                fontSize: "16px",
              },
            },
          }}
          IconComponent={(props) => <ArrowDownIcon {...props} />}
        >
          {question.content.variants
            .filter(({ answer }) => answer)
            .map((variant) => (
              <MenuItem
                key={variant.answer}
                value={variant.answer}
                data-cy="select-option"
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: "20px",
                  p: "4px",
                  borderRadius: "5px",
                  color: theme.palette.grey2.main,
                }}
              >
                {variant.answer}
              </MenuItem>
            ))}
        </Select>
      </FormControl>
    </Box>
  );
}
