frontPanel/src/pages/Questions/DraggableList/QuestionPageCard.tsx

import {
    Box,
    Checkbox,
    FormControl,
    FormControlLabel,
    IconButton,
    InputAdornment,
    Paper,
    TextField,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { useRef, useState } from "react";
import { useParams } from "react-router-dom";
import { useDebouncedCallback } from "use-debounce";

import SwitchQuestionsPage from "../SwitchQuestionsPage";
import TypeQuestions from "../TypeQuestions";
import { ChooseAnswerModal } from "./ChooseAnswerModal";

import {
    copyQuestion,
    createQuestion,
    removeQuestion,
    removeQuestionForce,
    updateQuestionsList
} from "@root/questions";

import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { OneIcon } from "@icons/questionsPage/OneIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import Answer from "@icons/questionsPage/answer";
import Date from "@icons/questionsPage/date";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import Download from "@icons/questionsPage/download";
import DropDown from "@icons/questionsPage/drop_down";
import Emoji from "@icons/questionsPage/emoji";
import { HideIcon } from "@icons/questionsPage/hideIcon";
import Input from "@icons/questionsPage/input";
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
import OptionsPict from "@icons/questionsPage/options_pict";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";


interface Props {
    question: AnyQuizQuestion;
    draggableProps: DraggableProvidedDragHandleProps | null | undefined;
    isDragging: boolean;
}

export default function QuestionsPageCard({ question, draggableProps, isDragging }: Props) {
    const [plusVisible, setPlusVisible] = useState<boolean>(false);
    const [open, setOpen] = useState<boolean>(false);
    const quizId = Number(useParams().quizId);
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const anchorRef = useRef(null);
    const debounced = useDebouncedCallback((title) => { // TODO update title
        // updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, { title });
    }, 200);

    return (
        <>
            <Paper
                data-cy="quiz-question-card"
                sx={{
                    maxWidth: "796px",
                    width: "100%",
                    borderRadius: "12px",
                    backgroundColor: question.expanded ? "white" : "#EEE4FC",
                    border: question.expanded ? "none" : "1px solid #9A9AAF",
                    boxShadow: "0px 10px 30px #e7e7e7",
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        padding: isMobile ? "10px" : "20px 10px 20px 20px",
                        flexDirection: isMobile ? "column" : null,
                    }}
                >
                    <FormControl
                        variant="standard"
                        sx={{
                            p: 0,
                            maxWidth: isTablet ? "549px" : "640px",
                            width: "100%",
                            marginRight: isMobile ? "0px" : "16.1px",
                        }}
                    >
                        <TextField
                            defaultValue={question.title}
                            placeholder={"Заголовок вопроса"}
                            onChange={({ target }) => debounced(target.value)}
                            InputProps={{
                                startAdornment: (
                                    <Box>
                                        <InputAdornment
                                            ref={anchorRef}
                                            position="start"
                                            sx={{ cursor: "pointer" }}
                                            onClick={() => setOpen((isOpened) => !isOpened)}
                                        >
                                            {IconAndrom(question.expanded, question.type)}
                                        </InputAdornment>
                                        <ChooseAnswerModal
                                            open={open}
                                            onClose={() => setOpen(false)}
                                            anchorRef={anchorRef}
                                            question={question}
                                            switchState={question.type}
                                        />
                                    </Box>
                                ),
                            }}
                            sx={{
                                margin: isMobile ? "10px 0" : 0,
                                "& .MuiInputBase-root": {
                                    color: "#000000",
                                    backgroundColor: question.expanded
                                        ? theme.palette.background.default
                                        : "transparent",
                                    height: "48px",
                                    borderRadius: "10px",
                                    ".MuiOutlinedInput-notchedOutline": {
                                        borderWidth: "1px !important",
                                        border: !question.expanded ? "none" : null,
                                    },
                                    "& .MuiInputBase-input::placeholder": {
                                        color: "#4D4D4D",
                                        opacity: 0.8,
                                    },
                                },
                            }}
                            inputProps={{
                                sx: {
                                    fontSize: "18px",
                                    lineHeight: "21px",
                                    py: 0,
                                    paddingLeft: question.type.length === 0 ? 0 : "18px",
                                },
                                "data-cy": "quiz-question-title",
                            }}
                        />
                    </FormControl>
                    <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={() =>
                                updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, {
                                    expanded: !question.expanded,
                                })
                            }
                        >
                            {question.expanded ? (
                                <ArrowDownIcon
                                    style={{
                                        width: "18px",
                                        color: "#4D4D4D",
                                    }}
                                />
                            ) : (
                                <ExpandLessIcon
                                    sx={{
                                        boxSizing: "border-box",
                                        fill: theme.palette.brightPurple.main,
                                        background: "#FFF",
                                        borderRadius: "6px",
                                        height: "30px",
                                        width: "30px",
                                    }}
                                />
                            )}
                        </IconButton>
                        {question.expanded ? (
                            <></>
                        ) : (
                            <Box
                                sx={{
                                    display: "flex",
                                    height: "30px",
                                    borderRight: "solid 1px #4D4D4D",
                                }}
                            >
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            icon={
                                                <HideIcon
                                                    style={{
                                                        boxSizing: "border-box",
                                                        color: "#7E2AEA",
                                                        background: "#FFF",
                                                        borderRadius: "6px",
                                                        height: "30px",
                                                        width: "30px",
                                                        padding: "3px",
                                                    }}
                                                />
                                            }
                                            checkedIcon={<CrossedEyeIcon />}
                                        />
                                    }
                                    label={""}
                                    sx={{
                                        color: theme.palette.grey2.main,
                                        ml: "-9px",
                                        mr: 0,
                                        userSelect: "none",
                                    }}
                                />
                                <IconButton
                                    sx={{ padding: "0" }}
                                    onClick={() => copyQuestion(quizId, totalIndex)}
                                >
                                    <CopyIcon
                                        style={{ color: theme.palette.brightPurple.main }}
                                    />
                                </IconButton>
                                <IconButton
                                    sx={{
                                        cursor: "pointer",
                                        borderRadius: "6px",
                                        padding: "0",
                                        margin: "0 5px 0 10px",
                                    }}
                                    onClick={() => {
                                        const removedId = question.id;
                                        if (question.deleteTimeoutId) {
                                            clearTimeout(question.deleteTimeoutId);
                                        }

                                        removeQuestion(quizId, totalIndex);

                                        const newTimeoutId = window.setTimeout(() => {
                                            removeQuestionForce(quizId, removedId);
                                        }, 5000);

                                        updateQuestionsList<AnyQuizQuestion>(quizId, totalIndex, {
                                            ...question,
                                            deleteTimeoutId: newTimeoutId,
                                        });
                                    }}
                                >
                                    <DeleteIcon
                                        style={{ color: theme.palette.brightPurple.main }}
                                    />
                                </IconButton>
                            </Box>
                        )}

                        <OneIcon
                            style={{
                                fontSize: "30px",
                                marginLeft: "3px",
                                color: !question.expanded ? "#FFF" : "",
                                fill: question.expanded
                                    ? "#EEE4FC"
                                    : theme.palette.brightPurple.main,
                            }}
                        />
                        <IconButton
                            disableRipple
                            sx={{
                                padding: isMobile ? "0" : "0 5px",
                                right: isMobile ? "0" : null,
                                bottom: isMobile ? "0" : null,
                            }}
                            {...draggableProps}
                        >
                            <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
                        </IconButton>
                    </Box>
                </Box>
                {question.expanded && (
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            padding: 0,
                            borderRadius: "12px",
                        }}
                    >
                        {question.type === "nonselected" ? (
                            <TypeQuestions question={question} />
                        ) : (
                            <SwitchQuestionsPage question={question} />
                        )}
                    </Box>
                )}
            </Paper>
            <Box
                onMouseEnter={() => setPlusVisible(true)}
                onMouseLeave={() => setPlusVisible(false)}
                sx={{
                    maxWidth: "825px",
                    display: "flex",
                    alignItems: "center",
                    height: "40px",
                    cursor: "pointer",
                }}
            >
                <Box
                    onClick={() => createQuestion(quizId, "nonselected", totalIndex + 1)}
                    sx={{
                        display: plusVisible && !isDragging ? "flex" : "none",
                        width: "100%",
                        alignItems: "center",
                        columnGap: "10px",
                    }}
                >
                    <Box
                        sx={{
                            boxSizing: "border-box",
                            width: "100%",
                            height: "1px",
                            backgroundPosition: "bottom",
                            backgroundRepeat: "repeat-x",
                            backgroundSize: "20px 1px",
                            backgroundImage:
                                "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
                        }}
                    />
                    <PlusIcon />
                </Box>
            </Box>
        </>
    );
}

const IconAndrom = (isExpanded: boolean, switchState: string) => {
    switch (switchState) {
        case "variant":
            return (
                <Answer
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "images":
            return (
                <OptionsPict
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "varimg":
            return (
                <OptionsAndPict
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "emoji":
            return (
                <Emoji
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "text":
            return (
                <Input
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "select":
            return (
                <DropDown
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "date":
            return (
                <Date
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "number":
            return (
                <Slider
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "file":
            return (
                <Download
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "page":
            return (
                <Page
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "rating":
            return (
                <RatingIcon
                    color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        default:
            return <></>;
    }
};