import {Box, Typography, Link, useTheme, TextField, FormControl, InputAdornment, IconButton} from "@mui/material";
import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import QuestionsPageCard from "../QuestionPageCard";
import {useParams} from "react-router-dom";
import {questionStore} from "@root/questions";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import DeleteIcon from "@icons/questionsPage/deleteIcon";
import MessageIcon from "@icons/messagIcon";
import Popover from '@mui/material/Popover';
import TextareaAutosize from '@mui/base/TextareaAutosize';

interface Props {
    totalIndex: number,
}


export default function AnswerOptions({totalIndex}: Props) {
    const params = Number(useParams().quizId);

    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
    const Answer = listQuestions[params][totalIndex].content.variants
    console.log(Answer)
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }


    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const open = Boolean(anchorEl);
    const id = open ? 'simple-popover' : undefined;
    return (
        <>
            <Box sx={{ padding: "0 20px 20px 20px"}}>
                {Answer.length === 0 ?
                    <Typography
                        sx={{
                            padding: '0 0 33px 80px',
                            fontWeight: 400,
                            fontSize: '18px',
                            lineHeight: '21.33px',
                            color: theme.palette.grey2.main
                        }}
                    >
                        Добавьте ответ
                    </Typography>
                    :
                    <Box>
                        {Answer.map((answer:string, index:number) => (
                                <FormControl
                                    fullWidth
                                    variant="standard"
                                    sx={{ p: "0 0 20px 0" }}
                                >
                                    <TextField
                                        value={Answer[index]}
                                        fullWidth
                                        placeholder={"Добавьте ответ"}
                                        onChange={(e) => {
                                            const answerNew = Answer
                                            answerNew[index] = e.target.value
                                            let clonContent = listQuestions[params][totalIndex].content
                                            clonContent.variant = answerNew
                                            updateQuestionsList(params, totalIndex, {content: clonContent})}}
                                        InputProps={{
                                            startAdornment: (
                                                <InputAdornment position="start">
                                                    <PointsIcon />
                                                </InputAdornment>
                                            ),
                                            endAdornment: (
                                                <InputAdornment position="end">
                                                    <IconButton aria-describedby={id} onClick={handleClick}>
                                                        <MessageIcon/>
                                                    </IconButton>
                                                    <Popover
                                                        id={id}
                                                        open={open}
                                                        anchorEl={anchorEl}
                                                        onClose={handleClose}
                                                        anchorOrigin={{
                                                            vertical: 'bottom',
                                                            horizontal: 'left',
                                                        }}
                                                    >
                                                        <TextareaAutosize style={{margin: "10px"}} placeholder="Подсказка для этого ответа" />
                                                    </Popover>
                                                    <IconButton
                                                        onClick={() => {
                                                            const answerNew = Answer
                                                            answerNew.splice(index, 1)
                                                            let clonContent = listQuestions[params][totalIndex].content
                                                            clonContent.variant = answerNew
                                                            updateQuestionsList(params, totalIndex, {content: clonContent})
                                                        }}
                                                    >
                                                        <DeleteIcon color={theme.palette.grey2.main}/>
                                                    </IconButton>
                                                </InputAdornment>
                                            )
                                        }}
                                        sx={{
                                            "& .MuiInputBase-root": {
                                                height: "48px",
                                                borderRadius: "10px",

                                            },
                                        }}
                                        inputProps={{
                                            sx: {
                                                borderRadius: "10px",
                                                fontSize: "18px",
                                                lineHeight: "21px",
                                                py: 0,

                                            }
                                        }}
                                    />
                                </FormControl>
                            )
                        )}
                    </Box>
                }

                <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: "10px"}}>
                    <Link
                        component="button"
                        variant="body2"
                        sx={{color: theme.palette.brightPurple.main}}
                         onClick={() => {
                             const answerNew = Answer
                             answerNew.push("")
                             let clonContent = listQuestions[params][totalIndex].content
                             clonContent.variant = answerNew
                             updateQuestionsList(params, totalIndex, {content: clonContent})
                         }}
                    >
                        Добавьте ответ
                    </Link>
                    <Typography
                        sx={{
                            fontWeight: 400,
                            fontSize: '18px',
                            lineHeight: '21.33px',
                            color: theme.palette.grey2.main
                        }}
                    >или нажмите Enter</Typography>
                    <EnterIcon/>
                </Box>


            </Box>
            <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
            <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex}/>
        </>
    )
}