import { useEffect, useState } from "react";

import { updateQuiz } from "@root/quizes/actions"
import { useCurrentQuiz } from "@root/quizes/hooks"

import { SwitchSetting } from "../SwichResult";

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

import ExpandLessIconBG from "@icons/ExpandLessIconBG";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import ShareNetwork from "@icons/ShareNetwork.svg";
import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import SwitchResult from "../DescriptionForm/SwitchResult";
import ButtonsOptionsForm from "../DescriptionForm/ButtinsOptionsForm";
import PriceButtons from "../DescriptionForm/PriceButton";
import DiscountButtons from "../DescriptionForm/DiscountButtons";
import CustomTextField from "@ui_kit/CustomTextField";
import { OneIcon } from "@icons/questionsPage/OneIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import Info from "@icons/Info";
import ImageAndVideoButtons from "../DescriptionForm/ImageAndVideoButtons";

interface Props {
    resultContract: boolean;
}

export const ResultCard = ({ resultContract }: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(true)
    }, [resultContract])


    const [switchState, setSwitchState] = useState<string>("");
    const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
    const [priceButtonsType, setPriceButtonsType] = useState<string>();
    const [forwarding, setForwarding] = useState<boolean>(false);
  
    const buttonsActive = (index: number, type: string) => {
      setPriceButtonsActive(index);
      setPriceButtonsType(type);
    };
  
    const SSHC = (data: string) => {
      setSwitchState(data);
    };

    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: isMobile ? "10px" : "20px",
                flexDirection: isMobile ? "column" : null,
                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: isMobile ? "100%" : "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={{
              overflow: "hidden",
              maxWidth: "796px",
              height: "100%",
              bgcolor: "#FFFFFF",
              borderRadius: "12px",
              boxShadow: "0px 10px 30px #e7e7e7",
            }}
          >
            <Box sx={{ p: "0 20px", pt: "30px" }}>
              <Box
                sx={{
                  width: "100%",
                  maxWidth: "760px",
                  display: "flex",
                  alignItems: "center",
                  gap: "10px",
                  mb: "19px",
                }}
              >
                <CustomTextField placeholder="Заголовок вопроса" text={""} />
                <IconButton>
                  <ExpandMoreIcon />
                </IconButton>
                <OneIcon />
                <PointsIcon style={{ color: "#9A9AAF" }} />
              </Box>
      
              <Box sx={{ display: "flex" }}>
                <PriceButtons
                  ButtonsActive={buttonsActive}
                  priceButtonsActive={priceButtonsActive}
                />
              </Box>
      
              <TextField
                fullWidth
                placeholder="Описание"
                sx={{
                  "& .MuiInputBase-root": {
                    backgroundColor: "#F2F3F7",
                    width: "100%",
                    height: "110px",
                    borderRadius: "10px",
                  },
                }}
                inputProps={{
                  sx: {
                    borderRadius: "10px",
                    fontSize: "18px",
                    lineHeight: "21px",
                    py: 0,
                  },
                }}
              />
              <ImageAndVideoButtons />
              {priceButtonsType === "smooth" ? (
                <Box sx={{ mb: "20px" }}>
                  <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
                    <Typography
                      component={"h6"}
                      sx={{ weight: "500", fontSize: "18px" }}
                    >
                      Призыв к действию
                    </Typography>
                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                      <DeleteIcon style={{ color: "#4D4D4D" }} />
                    </IconButton>
                  </Box>
                  <Box sx={{ display: "flex" }}>
                    <TextField
                      placeholder="Узнать подробнее"
                      fullWidth
                      sx={{
                        width: "410px",
                        "& .MuiInputBase-root": {
                          backgroundColor: "#F2F3F7",
                          width: "410px",
                          height: "48px",
                          borderRadius: "10px",
                        },
                      }}
                      inputProps={{
                        sx: {
                          borderRadius: "10px",
                          fontSize: "18px",
                          lineHeight: "21px",
                          py: 0,
                        },
                      }}
                    />
                    <Button
                      onClick={() => setForwarding(true)}
                      variant="outlined"
                      sx={{
                        display: forwarding ? "none" : "",
                        ml: "20px",
                        mb: "20px",
                      }}
                    >
                      Переадресация +
                    </Button>
                    {forwarding ? (
                      <Box sx={{ ml: "20px", mt: "-36px" }}>
                        <Box
                          sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
                        >
                          <Typography
                            component={"h6"}
                            sx={{ weight: "500", fontSize: "18px" }}
                          >
                            Переадресация
                          </Typography>
                          <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                            <DeleteIcon style={{ color: "#4D4D4D" }} />
                          </IconButton>
                          <Info />
                        </Box>
                        <Box>
                          <TextField
                            placeholder="https://exemple.ru"
                            fullWidth
                            sx={{
                              "& .MuiInputBase-root": {
                                backgroundColor: "#F2F3F7",
                                width: "326px",
                                height: "48px",
                                borderRadius: "10px",
                              },
                            }}
                            inputProps={{
                              sx: {
                                borderRadius: "10px",
                                fontSize: "18px",
                                lineHeight: "21px",
                                py: 0,
                              },
                            }}
                          />
                        </Box>
                      </Box>
                    ) : (
                      <></>
                    )}
                  </Box>
                </Box>
              ) : (
                <Button variant="outlined" sx={{ mb: "20px" }}>
                  Кнопка +
                </Button>
              )}
            </Box>
            <ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
            <SwitchResult switchState={switchState} totalIndex={0} />
          </Box>
        )}
    </Paper>
    )
}