frontPanel/src/pages/Questions/QuestionPageCard.tsx

import {Box, Checkbox, FormControlLabel, IconButton, Paper, useTheme} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import OneIcon from "@icons/questionsPage/OneIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import TypeQuestions from "./TypeQuestions";
import SwitchQuestionsPage from "./SwitchQuestionsPage";
import React, {useState} from "react";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import {useParams} from "react-router-dom";
import {questionStore} from "@root/questions";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import HideIcon from "@icons/questionsPage/hideIcon";

interface Props {
    DeleteClick: () => void;
    totalIndex: number
}

export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {

    function onDragStart(event: any) {
        event
            .dataTransfer
            .setData('text', event.target.id);
    }


    const theme = useTheme();
    const params = Number(useParams().quizId);
    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
    const [isExpanded, setIsExpanded] = useState<boolean>(false);
    const switchState = listQuestions[params][totalIndex].type
    return (
        <Paper
            draggable="true"
            id={String(totalIndex)}
            sx={{
                maxWidth: "796px",
                width: "100%",
                borderRadius: "12px",
                margin: "20px 0",
                backgroundColor: isExpanded ? "white" : "#333647"
            }}
            onDragStart={onDragStart}
        >
            <Box
                sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
            >
                <CustomTextField placeholder="Заголовок вопроса" text={""}
                                 onChange={e => {updateQuestionsList(params, totalIndex, {title: e.target.value})
                                     console.log(listQuestions[params][totalIndex].title)
                                 }
                                 }/>
                <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
                    {" "}
                    {isExpanded ?
                    <ExpandMoreIcon />
                    :<ExpandLessIcon  fill="#7E2AEA"/>
                    }
                </IconButton>
                <Box sx={{display: "flex"}}>
                    <FormControlLabel
                        control={
                            <Checkbox
                                icon={<HideIcon/>}
                                checkedIcon={<CrossedEyeIcon />}
                            />}
                        label={""}
                        sx={{
                            color: theme.palette.grey2.main,
                            ml: "-9px",
                            mr: 0,
                            userSelect: "none",
                        }}

                    />
                    <IconButton><CopyIcon/></IconButton>
                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={DeleteClick}>
                        <DeleteIcon />
                    </IconButton>
                </Box>
                <OneIcon />
                <PointsIcon />

            </Box>
            {isExpanded && (
                <Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
                    {switchState.length === 0 ?
                        <TypeQuestions totalIndex={totalIndex}/>
                        :
                        <SwitchQuestionsPage totalIndex={totalIndex}/>}
                </Box>)
            }
        </Paper>

    )
}