import React from "react";
import { Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CustomTextField from "@ui_kit/CustomTextField";
import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import InfoIcon from "../../assets/icons/InfoIcon";
import ButtonSettingForms from "./ButtonSettingForms";
import SwitchContactForm from "./switchContactForm";
import DrawerNewField from "./DrawerParent";
import WindowNewField from "./NewField/WindowNewField";
import WindowMessengers from "./Massengers/WindowMessengers";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";

export default function ContactFormPage() {
  const { listQuizes, updateQuizesList } = quizStore();
  const params = Number(useParams().quizId);
  const handleNext = () => {
    updateQuizesList(params, { step: listQuizes[params].step + 1 });
  };

  const [activeStep, setActiveStep] = React.useState(4);

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const [drawerNewField, setDrawerNewField] = React.useState(false);
  const [drawerMessenger, setDrawerMessenger] = React.useState(false);

  const drawerNewFieldHC = (bool: boolean) => {
    setDrawerNewField(bool);
  };
  const drawerMessengerHC = (bool: boolean) => {
    setDrawerMessenger(bool);
  };

  const theme = useTheme();
  return (
    <>
      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <Link
          sx={{
            fontSize: "16px",
            lineHeight: "19px",
            color: theme.palette.brightPurple.main,
            textDecorationColor: theme.palette.brightPurple.main,
          }}
        >
          Как собрать данные посетителя
        </Link>{" "}
        <InfoIcon />
      </Box>
      <ContactFormParent>
        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
          <OneIcon />
          <IconButton>
            {" "}
            <ExpandMoreIcon />{" "}
          </IconButton>
        </Box>
        <Box sx={{ display: "flex", flexDirection: "column", gap: "20px", padding: "10px 20px" }}>
          <Typography>Имя*</Typography>
          <CustomTextField placeholder="Дмитрий" text={""} />
          <Typography>E-mail*</Typography>
          <CustomTextField placeholder="+7 900 000 00 00" text={""} />
          <Typography>Телефон*</Typography>
          <CustomTextField placeholder="+7 900 000 00 00" text={""} />
          <Button
            onClick={() => drawerNewFieldHC(true)}
            variant="contained"
            sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
          >
            Добавить поле +
          </Button>
          <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}>
            <WindowNewField />
          </DrawerNewField>
          <Link
            component="button"
            onClick={() => drawerMessengerHC(true)}
            sx={{
              fontSize: "16px",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main,
              textAlign: "left",
            }}
          >
            Добавить мессенджеры
          </Link>
          <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
            <WindowMessengers />
          </DrawerNewField>

          <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
            Название кнопки
          </Button>
        </Box>
      </ContactFormParent>

      <ContactFormParent>
        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "end" }}>
          <OneIcon />
          <IconButton>
            {" "}
            <ExpandMoreIcon />{" "}
          </IconButton>
        </Box>
        <Button variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
          Добавить поле +
        </Button>
        <Box sx={{ display: "flex" }}>
          <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
          <InfoIcon />
        </Box>
        <Link
          sx={{
            mt: "20px",
            fontSize: "16px",
            lineHeight: "19px",
            color: theme.palette.brightPurple.main,
            textDecorationColor: theme.palette.brightPurple.main,
          }}
        >
          Добавить мессенджеры
        </Link>
        <Button variant="contained" sx={{ padding: "10px 20px", maxWidth: "fit-content" }}>
          Название кнопки
        </Button>
      </ContactFormParent>
      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
        <IconButton>
          <AddPlus />
        </IconButton>
        <Box sx={{ display: "flex", gap: "8px" }}>
          <Button variant="outlined">
            <ArrowLeft />
          </Button>
          <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={handleNext}>
            Установка квиза
          </Button>
        </Box>
      </Box>
    </>
  );
}

interface Props {
  outerContainerSx?: SxProps<Theme>;
  children?: React.ReactNode;
}

function ContactFormParent({ outerContainerSx: sx, children }: Props) {
  const theme = useTheme();
  const [switchState, setSwitchState] = React.useState("setting");
  const SSHC = (data: string) => {
    setSwitchState(data);
  };
  return (
    <Paper
      sx={{
        maxWidth: "796px",
        width: "100%",
        borderRadius: "12px",
        margin: "20px 0",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box sx={{ width: "100%", display: "flex" }}>
        <Box
          sx={{
            borderRight: `1px solid ${theme.palette.grey2.main}`,
            maxWidth: "386px",
            width: "100%",
            padding: "113px 20px 20px 20px",
            display: "flex",
            flexDirection: "column",
            gap: "20px",
          }}
        >
          <CustomTextField placeholder="Заголовок формы" text={""} />
          <TextField
            id="outlined-multiline-static"
            multiline
            rows={8}
            placeholder="Дополнительный текст формы"
            sx={{
              backgroundColor: theme.palette.background.default,

              "& .MuiInputBase-root": {
                borderRadius: "10px",
                alignItems: "start",
                color: theme.palette.grey2.main,
              },
            }}
          />
        </Box>
        <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
          {children}
        </Box>
      </Box>
      <Box>
        <ButtonSettingForms switchState={switchState} SSHC={SSHC} />
        <SwitchContactForm switchState={switchState} />
      </Box>
    </Paper>
  );
}