import {
    Box,
    Checkbox,
    FormControl,
    FormControlLabel,
    IconButton,
    InputAdornment,
    Paper,
    TextField,
    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, updateQuestionsList, removeQuestion} from "@root/questions";
import CopyIcon from "@icons/questionsPage/CopyIcon";
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
import HideIcon from "@icons/questionsPage/hideIcon";
import Answer from "@icons/questionsPage/answer";
import OptionsPict from "@icons/questionsPage/options_pict";
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
import Emoji from "@icons/questionsPage/emoji";
import Input from "@icons/questionsPage/input";
import DropDown from "@icons/questionsPage/drop_down";
import Date from "@icons/questionsPage/date";
import Slider from "@icons/questionsPage/slider";
import Download from "@icons/questionsPage/download";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";

interface Props {
    totalIndex: number
}

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

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


    const theme = useTheme();
    const {listQuestions} = questionStore()
    const [isExpanded, setIsExpanded] = useState<boolean>(false);
    const switchState = listQuestions[totalIndex].type
    console.log(listQuestions[totalIndex].type)
    console.log(totalIndex)
    return (
        <Paper
            // draggable="true"
            // id={String(totalIndex)}
            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" }}
            >
                <FormControl
                    fullWidth
                    variant="standard"
                    sx={{ p: 0 }}
                >
                    <TextField
                        defaultValue={""}
                        fullWidth
                        value={listQuestions[totalIndex].title}
                        placeholder={"Заголовок вопроса"}
                        onChange={e => {
                            updateQuestionsList(totalIndex, {title: e.target.value})
                            console.log(listQuestions[totalIndex].title)
                        }}
                        InputProps={{
                            startAdornment: (
                                <InputAdornment position="start">
                                    {IconAndrom(isExpanded, switchState)}
                                </InputAdornment>
                            ),
                        }}
                        sx={{
                            "& .MuiInputBase-root": {
                                color: isExpanded ? "#9A9AAF" : "white",
                                backgroundColor: isExpanded ? theme.palette.background.default : "transparent",
                                height: "48px",
                                borderRadius: "10px",

                            },
                        }}
                        inputProps={{

                            sx: {
                                borderRadius: "10px",
                                fontSize: "18px",
                                lineHeight: "21px",
                                py: 0,
                                paddingLeft: switchState.length === 0 ? 0 : "18px"
                            }
                        }}
                    />
                </FormControl>


                <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
                    {" "}
                    {isExpanded ?
                    <ExpandMoreIcon />
                    :<ExpandLessIcon  fill="#7E2AEA"/>
                    }
                </IconButton>
                {isExpanded ?
                   <></>
                    :
                    <Box sx={{display: "flex", borderRight: "solid 1px white"}}>
                        <FormControlLabel
                            control={
                                <Checkbox
                                    icon={<HideIcon color={"#7E2AEA"}/>}
                                    checkedIcon={<CrossedEyeIcon />}
                                />}
                            label={""}
                            sx={{
                                color: theme.palette.grey2.main,
                                ml: "-9px",
                                mr: 0,
                                userSelect: "none",
                            }}

                        />
                        <IconButton><CopyIcon color={"white"}/></IconButton>
                        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
                            <DeleteIcon color={"white"}/>
                        </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>

    )
}