frontPanel/src/pages/ResultPage/cards/WhenCard.tsx

import { useEffect, useState } from "react";

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

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

import Info from "@icons/Info";
import {
    Box,
    IconButton,
    Paper,
    Button,
    Typography,
    useMediaQuery,
    useTheme,
    Popover,
} 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";

const whenValues = [
    {
        title: "До формы контактов",
        value: "before",
    },
    {
        title: "После формы контактов",
        value: "after",
    },
    {
        title: "Отправить на E-mail",
        value: "email",
    },
];

interface Props {
    quizExpand: boolean
}

const InfoView = () => {
    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(
      null
    );
  
    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      setAnchorEl(event.currentTarget);
    };
  
    const handleClose = () => {
      setAnchorEl(null);
    };
  
    const open = Boolean(anchorEl);
    const id = open ? "simple-popover" : undefined;
  
    return (
      <>
        <Info
          sx={{
            "MuiIconButton-root": {
              boxShadow: "0 0 10px 10px red",
            },
          }}
          onClick={handleClick}
        />
        <Popover
          id={id}
          open={open}
          anchorEl={anchorEl}
          onClose={handleClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
        >
          <Paper
            sx={{
              p: "20px",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              flexDirection: "column",
            }}
          >
            <Typography>
            Oтправка письма с результатом респонденту после отображения на экране
            </Typography>
          </Paper>
        </Popover>
      </>
    );
  };

export const WhenCard = ({ 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: 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={{
                            p: "33px 20px",
                        }}
                    >
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: isSmallMonitor ? "column" : "row",
                                justifyContent: "space-between",
                                gap: "20px",
                                mb: "20px",
                            }}
                        >
                            {whenValues.map(({ title, value }, index) => (
                                <Box display="flex">
                                <Button
                                    onClick={() => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.when = value)}
                                    key={title}
                                    sx={{
                                        bgcolor: quiz?.config.resultInfo.when === value ? " #7E2AEA" : "#F2F3F7",
                                        color: quiz?.config.resultInfo.when === value ? " white" : "#9A9AAF",
                                        minWidth: isSmallMonitor ? "310px" : "auto",
                                        borderRadius: "8px",
                                        width: "220px",
                                        height: "44px",
                                        fontSize: "17px",
                                        border: quiz?.config.resultInfo.when === value ? "none" : "1px solid #9A9AAF",
                                        "&:hover": {
                                            backgroundColor: quiz?.config.resultInfo.when === value ? "#581CA7" : "#7E2AEA",
                                            color: "white"

                                        }
                                    }}
                                >
                                    {title}
                                </Button>
                                    {value === "email" && <InfoView/>}
                                </Box>
                            ))}
                        </Box>


                        {/* {
                            (quiz?.config.resultInfo.when !== "email") && <SwitchSetting
                                icon={ShareNetwork}
                                text="Поделиться результатами"
                                onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.share = event.target.checked)}
                                value={quiz?.config.resultInfo.share}
                            />
                        }
                        {
                            quiz?.config.resultInfo.when === "before" && <SwitchSetting
                                icon={ArrowCounterClockWise}
                                text="Кнопка `Пройти тест заново`"
                                onClick={(event) => updateQuiz(quiz.id, (quiz) => quiz.config.resultInfo.replay = event.target.checked)}
                                value={quiz?.config.resultInfo.replay}
                            />
                        } */}



                    </Box>
                </>
            )}
        </Paper>

    )
}