import { useQuizSettings } from "@/contexts/QuizDataContext";
import { AnyTypedQuizQuestion } from "@/model/questionTypes/shared";
import { Box, FormControl, MenuItem, Select as MuiSelect, useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";

interface Props {
  selectedQuestion: AnyTypedQuizQuestion;
  setQuestion: (questionIdF: string) => void;
}

export default function QuestionSelect({ selectedQuestion, setQuestion }: Props) {
  const theme = useTheme();
  const { questions, preview } = useQuizSettings();
  const { t } = useTranslation();

  if (!preview) return null;

  return (
    <Box
      sx={{
        p: "20px",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <FormControl
        fullWidth
        size="small"
        sx={{
          maxWidth: "500px",
          minWidth: "200px",
          height: "48px",
        }}
        className="cancel"
      >
        <MuiSelect
          id="category-select"
          variant="outlined"
          value={selectedQuestion.id}
          placeholder={t("Question title")}
          onChange={({ target }) => {
            setQuestion(target.value);
          }}
          sx={{
            height: "48px",
            borderRadius: "8px",
            "& .MuiOutlinedInput-notchedOutline": {
              border: `1px solid ${theme.palette.primary.main} !important`,
            },
            "& .MuiSelect-icon": {
              color: theme.palette.primary.main,
            },
          }}
          MenuProps={{
            PaperProps: {
              sx: {
                mt: "8px",
                p: "4px",
                borderRadius: "8px",
                border: "1px solid #EEE4FC",
                boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                backgroundColor: theme.palette.background.default,
              },
            },
            MenuListProps: {
              sx: {
                py: 0,
                display: "flex",
                flexDirection: "column",
                gap: "8px",
                "& .Mui-selected": {
                  backgroundColor: theme.palette.background.default,
                  color: theme.palette.primary.main,
                },
              },
            },
          }}
          inputProps={{
            sx: {
              color: theme.palette.primary.main,
              display: "block",
              px: "9px",
              gap: "20px",
              width: "87%",
              overflow: "hidden",
              textOverflow: "ellipsis",
            },
          }}
        >
          {questions
            .filter((q) => q.type !== "result")
            .map((question, index) => (
              <MenuItem
                key={question.id}
                value={question.id}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: "20px",
                  p: "4px",
                  borderRadius: "5px",
                  color: "#9A9AAF",
                  wordBreak: "break-word",
                  whiteSpace: "normal",
                }}
              >
                {`${index + 1}. ${question.title}`}
              </MenuItem>
            ))}
        </MuiSelect>
      </FormControl>
    </Box>
  );
}