import { Box, MenuItem, FormControl, Checkbox, FormControlLabel, Radio, RadioGroup, Typography, useTheme, Select, Chip, IconButton, TextField } from "@mui/material"
import RadioCheck from "@ui_kit/RadioCheck"
import RadioIcon from "@ui_kit/RadioIcon"
import { QuizQuestionBase } from "model/questionTypes/shared"
import { useState, useRef, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useQuestionsStore } from "@root/questions/store";
import { updateQuestion, getQuestionById } from "@root/questions/actions";
import { AnyQuizQuestion } from "../../../model/questionTypes/shared"
import { SelectChangeEvent } from '@mui/material/Select';

import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

const CONDITIONS = [
    "Все условия обязательны",
    "Обязательно хотя бы одно условие",
];
interface Props {
    parentQuestion: AnyQuizQuestion;
    targetQuestion: AnyQuizQuestion;
    ruleIndex: number;
    setParentQuestion: (q:AnyQuizQuestion) => void;
}


//Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
    console.log("index " + ruleIndex)

    switch (parentQuestion.type) {
        // case 'nonselected':
        //     return <BlockRule text={"Не выбран тип родительского вопроса"} />
        //     break;

        case "variant":
        case "images":
        case "varimg":
        case "emoji":
        case "select":

            return (parentQuestion.content.variants === undefined ? <BlockRule text={"У родителя нет вариантов"} /> :
                <SelectorType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
                //Реализован
            )
            break;

         case "date":
             // return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
             return <></>

             break;

        case "number":
            return <NumberInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
            //Реализован
            break;

        case "page":
        case "date":
            return <BlockRule text={"У такого родителя может быть только один потомок"} />
            break;

        case "text":
            return <TextInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
            //Реализован
            break;

        case "file":
            return <FileInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
            //Реализован
            break;

        case "rating":
            return <RatingInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} setParentQuestion={setParentQuestion} />
            //Реализован
            break;

        default:
            return <BlockRule text={"Не распознан тип родительского вопроса"} />
            break;
    }

}

export const BlockRule = ({ text }: { text: string }) => {
    return (
        <Typography
            sx={{
                margin: "100px 0",
                textAlign: "center"
            }}
        >{text}</Typography>
    )
}
const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
    const theme = useTheme();
    const quizId = Number(useParams().quizId);
    console.log(parentQuestion)
    return (

        <Box
            sx={{
                padding: "20px",
                margin: "20px",
                borderRadius: "8px",
                bgcolor: "#F2F3F7",
                height: "280px",
                overflow: "auto"
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    pb: "5px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Новое условие
                </Typography>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
                        setParentQuestion(newParentQuestion)
                    }}
                >
                    <DeleteIcon color={"#4D4D4D"} />
                </IconButton>
            </Box>

            <Box
                sx={{
                    display: "flex",
                    alignItems: "center",
                    pb: "10px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Дан ответ
                </Typography>
                <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
                    (Укажите один или несколько вариантов)
                </Typography>
            </Box>
            <Select
                multiple
                value={parentQuestion.content?.rule?.main[ruleIndex]?.rules[0]?.answers || []}
                onChange={(event: SelectChangeEvent) => {

                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value
                    setParentQuestion(newParentQuestion)
                    console.log(parentQuestion.content.rule.main[ruleIndex])
                    console.log(parentQuestion.content.rule.main[ruleIndex].rules[0])
                    console.log(parentQuestion.content.rule.main[ruleIndex].rules[0].answers)
                }}
                sx={{
                    width: "100%",
                    height: "48px",
                    borderRadius: "8px",
                    "& .MuiOutlinedInput-notchedOutline": {
                        border: `1px solid ${theme.palette.brightPurple.main} !important`,
                        height: "48px",
                        borderRadius: "10px",
                    },
                }}
            >
                {parentQuestion.content.variants.map((e: any) => {
                    return <MenuItem value={e.id}>
                        {e.answer}
                    </MenuItem>
                })}

            </Select>

            <FormControl>
                <RadioGroup
                    aria-labelledby="demo-controlled-radio-buttons-group"
                    value={parentQuestion.content.rule.main[ruleIndex].or}
                    onChange={(_, value) => {
                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                        newParentQuestion.content.rule.main[ruleIndex].or = value
                        setParentQuestion(newParentQuestion)
                    }}
                >
                    {CONDITIONS.map((condition, totalIndex) => (
                        <FormControlLabel
                            key={totalIndex}
                            sx={{ color: theme.palette.grey2.main }}
                            value={Boolean(Number(totalIndex))}
                            control={
                                <Radio
                                    checkedIcon={<RadioCheck />}
                                    icon={<RadioIcon />}
                                />
                            }
                            label={condition}
                        />
                    ))}
                </RadioGroup>
            </FormControl>


        </Box >
    )
}
const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {

    return <></>
}
const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
    const theme = useTheme();
    const quizId = Number(useParams().quizId);

    return (
        <Box
            sx={{
                padding: "20px",
                margin: "20px",
                borderRadius: "8px",
                bgcolor: "#F2F3F7",
                height: "280px",
                overflow: "auto"
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    pb: "5px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Новое условие
                </Typography>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
                        setParentQuestion(newParentQuestion)
                    }}
                >
                    <DeleteIcon color={"#4D4D4D"} />
                </IconButton>
            </Box>

            <Box
                sx={{
                    display: "flex",
                    alignItems: "center",
                    pb: "10px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Дан ответ
                </Typography>
                <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
                    (Укажите один или несколько вариантов)
                </Typography>
            </Box>
            {/* <TextField
                sx={{
                    marginTop: "20px",
                    width: "100%"
                }}

                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
                onChange={(event: React.FormEvent<HTMLInputElement>) => {

                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
                    setParentQuestion(newParentQuestion)

                }}
            /> */}




        </Box >
    )
}
const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
    const theme = useTheme();
    const quizId = Number(useParams().quizId);

    return (
        <Box
            sx={{
                padding: "20px",
                margin: "20px",
                borderRadius: "8px",
                bgcolor: "#F2F3F7",
                height: "280px",
                overflow: "auto"
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    pb: "5px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Новое условие
                </Typography>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
                        setParentQuestion(newParentQuestion)
                    }}
                >
                    <DeleteIcon color={"#4D4D4D"} />
                </IconButton>
            </Box>

            <Box
                sx={{
                    display: "inline",
                    alignItems: "center",
                    pb: "10px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Дан ответ
                </Typography>
                <Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
                    (Укажите текст, при совпадении с которым пользователь попадёт на этот вопрос)
                </Typography>
            </Box>
            {/* <TextField
                sx={{
                    marginTop: "20px",
                    width: "100%"
                }}
                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
                onChange={(event: React.FormEvent<HTMLInputElement>) => {

                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value]
                    setParentQuestion(newParentQuestion)

                }}
            /> */}




        </Box >
    )
}
const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
    const theme = useTheme();
    const quizId = Number(useParams().quizId);

    return (
        <Box
            sx={{
                padding: "20px",
                margin: "20px",
                borderRadius: "8px",
                bgcolor: "#F2F3F7",
                height: "280px",
                overflow: "auto"
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    pb: "5px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Новое условие
                </Typography>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
                        setParentQuestion(newParentQuestion)
                    }}
                >
                    <DeleteIcon color={"#4D4D4D"} />
                </IconButton>
            </Box>

            <Box
                sx={{
                    display: "inline",
                    alignItems: "center",
                    pb: "10px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Перевести на этот вопрос если пользователь загрузил файл
                </Typography>
            </Box>
            <FormControlLabel control={<Checkbox

                sx={{
                    margin: 0
                }}
                checked={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
                onChange={(event: React.FormEvent<HTMLInputElement>) => {

                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).checked]
                    setParentQuestion(newParentQuestion)

                }}
            />} label="да" />




        </Box >
    )
}
const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex, setParentQuestion }: Props) => {
    const theme = useTheme();
    const quizId = Number(useParams().quizId);

    return (
        <Box
            sx={{
                padding: "20px",
                margin: "20px",
                borderRadius: "8px",
                bgcolor: "#F2F3F7",
                height: "280px",
                overflow: "auto"
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    pb: "5px",
                }}
            >
                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                    Новое условие
                </Typography>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                        let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
                        setParentQuestion(newParentQuestion)
                    }}
                >
                    <DeleteIcon color={"#4D4D4D"} />
                </IconButton>
            </Box>

            <Box
                sx={{
                    display: "inline",
                    alignItems: "center",
                    pb: "10px",
                }}
            >
                <Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
                    (Ожидаемое количество ячеек)
                </Typography>
            </Box>
            {/* <TextField
                sx={{
                    marginTop: "20px",
                    width: "100%"
                }}
                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
                onChange={(event: React.FormEvent<HTMLInputElement>) => {

                    let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion))
                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
                    setParentQuestion(newParentQuestion)

                }}
            /> */}




        </Box >
    )
}

// {
//     content: {
//         rule: {
//             main: [
//                 {
//                     next: "id of next question", // 2 string
//                     or: true // 3 boolean
//                 rules: [
//                         {
//                             question: "question id", string
//                 answers: [] // ответы на вопросы. для вариантов выбора - конкретные айдишники, для полей ввода текста - текст по полному совпадению, для ввода файла ии ещё какой подобной дичи - просто факт того что файл ввели, т.е. boolean
//                         }
//                     ]
//                 }
//             ],
//             default: ID string
//         }
//     }
// }