import { useEffect, useState } from "react";

import { useCurrentQuiz } from "@root/quizes/hooks";

import {
  Box,
  TextField,
  IconButton,
  Paper,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";

import ExpandLessIconBG from "@icons/ExpandLessIconBG";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { updateQuiz } from "@root/quizes/actions";

interface Props {
  quizExpand: boolean;
}

export const EmailSettingsCard = ({ quizExpand }: Props) => {
  const quiz = useCurrentQuiz();
  const theme = useTheme();

  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));

  const [expand, setExpand] = useState(true);

  useEffect(() => {
    setExpand(false);
  }, [quizExpand]);

  return (
    <Paper
      data-cy="quiz-question-card"
      sx={{
        maxWidth: "796px",
        width: "100%",
        borderRadius: "12px",
        backgroundColor: expand ? "white" : "#EEE4FC",
        border: expand ? "none" : "1px solid #9A9AAF",
        boxShadow: "0px 10px 30px #e7e7e7",
        m: "20px 0",
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          padding: expand
            ? isMobile
              ? "10px 10px 0 10px"
              : "20px 20px 0 20px"
            : "20px",
          justifyContent: "space-between",
          minHeight: "40px",
        }}
      >
        <Typography
          sx={{
            margin: isMobile ? "10px 0" : 0,
            color: expand ? "#9A9AAF" : "#000000",
          }}
        >
          Настройки почты
        </Typography>
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-end",
            width: "auto",
            position: "relative",
          }}
        >
          <IconButton
            sx={{ padding: "0", margin: "5px" }}
            disableRipple
            data-cy="expand-question"
            onClick={() => setExpand(!expand)}
          >
            {expand ? (
              <ExpandLessIconBG />
            ) : (
              <ExpandLessIcon
                sx={{
                  boxSizing: "border-box",
                  fill: theme.palette.brightPurple.main,
                  background: "#FFF",
                  borderRadius: "6px",
                  height: "30px",
                  width: "30px",
                }}
              />
            )}
          </IconButton>
        </Box>
      </Box>
      {expand && (
        <Box
          sx={{
            p: "0 20px 20px 20px",
          }}
        >
          <Typography
            sx={{
              color: "#4D4D4D",
              m: "20px 0 14px 0",
              fontSize: "18px",
              fontWeight: 500,
            }}
          >
            Тема письма
          </Typography>
          <TextField
            id="questionTitle"
            value={quiz.config.resultInfo.theme}
            placeholder={"Введите тему письма"}
            onChange={({ target }: { target: HTMLInputElement }) => {
              updateQuiz(quiz.id, (quiz) => {
                quiz.config.resultInfo.theme = target.value;
              });
            }}
            sx={{
              margin: isMobile ? "10px 0" : 0,
              width: "100%",
              "& .MuiInputBase-root": {
                color: "#000000",
                backgroundColor: expand
                  ? theme.palette.background.default
                  : "transparent",
                height: "48px",
                borderRadius: "10px",
                ".MuiOutlinedInput-notchedOutline": {
                  borderWidth: "1px !important",
                  border: expand ? "none" : null,
                },
                "& .MuiInputBase-input::placeholder": {
                  color: "#4D4D4D",
                  opacity: 0.8,
                },
              },
            }}
            inputProps={{
              sx: {
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
                paddingLeft: "18px",
              },
            }}
          />
        </Box>
      )}
    </Paper>
  );
};
