import {Box, IconButton, Paper} 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";

interface Props {
    switchState: string;
    SSHC: (data: string) => void;
    DeleteClick: () => void;
    totalIndex: number
}

export default function QuestionsPageCard({ SSHC, switchState, totalIndex }: Props) {
    const params = Number(useParams().quizId);
    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
    const [isExpanded, setIsExpanded] = useState<boolean>(false);
    return (
        <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0", backgroundColor: isExpanded ? "white" : "#333647" }}>
            <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>
                <OneIcon />
                <PointsIcon />
                <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                    <DeleteIcon />
                </IconButton>
            </Box>
            {isExpanded && (
                <Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
                    {switchState.length === 0 ?
                        <TypeQuestions switchState={switchState} SSHC={SSHC}/>
                        :
                        <SwitchQuestionsPage switchState={switchState} totalIndex={totalIndex}/>}
                </Box>)
            }
        </Paper>

    )
}