import {
    Box,
    Button,
    FormControl,
    FormControlLabel,
    Radio,
    RadioGroup,
    TextField,
    Typography,
    useTheme
} from "@mui/material";
import React, {useState} from "react";
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import VidjetImg from "../../assets/VidjetImg.png"
import LDownButton from "@icons/InstallQuizIcon/LDownButton";
import RDownButton from "@icons/InstallQuizIcon/RDownButton";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";




export default function VidjetInstall () {
    const [value, setValue] = React.useState("1");

    const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValue((event.target as HTMLInputElement).value);
    };

    const [position, setPosition] = useState<"left" | "right">("left");

    const theme = useTheme();
    return (
        <InstallQzOnSiteParent>
            {/*левая часть*/}
            <Box sx={{maxWidth: '560px'}}>
                <img src={VidjetImg}/>
                <Typography sx={{fontSize: '14px', color: theme.palette.grey2.main}}>
                    Если квиз уже установлен на сайт, и вы что-то здесь изменили, код на сайте нужно будет поменять.
                    Настройки в этом конструкторе не сохраняются.
                </Typography>
            </Box>
            {/*правая часть*/}
            <Box sx={{display: "flex", flexDirection: "column", gap: "15px"}}>
                <Typography sx={{color: theme.palette.grey2.main}}>
                    Расположение
                </Typography>
                <Box sx={{display: "flex"}}>
                    <SelectButtonPosition
                        onClick={() => setPosition("left")}
                        isActive={position === "left"}
                        Icon={LDownButton}
                    />
                    <SelectButtonPosition
                        onClick={() => setPosition("right")}
                        isActive={position === "right"}
                        Icon={RDownButton}
                    />
                </Box>


                <Box sx={{display: "flex", gap: "10px", alignItems: "center"}}>
                    <Typography sx={{color: theme.palette.grey2.main}}>Показывать виджет</Typography>
                    <FormControl
                        fullWidth
                        variant="standard"
                        sx={{ p: 0, width: "60px", }}
                    >
                        <TextField
                            fullWidth
                            placeholder="10"
                            sx={{
                                "& .MuiInputBase-root": {
                                    backgroundColor: theme.palette.background.default,
                                    height: "48px",
                                    width: "60px",
                                    borderRadius: "10px",

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

                                }
                            }}
                        />
                    </FormControl>
                    <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
                </Box>
                <Typography sx={{color: theme.palette.grey2.main}}>Автооткрытие виджета при входе на сайт</Typography>
                <FormControl>
                    <RadioGroup
                        aria-labelledby="demo-controlled-radio-buttons-group"
                        name="controlled-radio-buttons-group"
                        value={value}
                        onChange={handleChangeRadio}
                        sx={{maxWidth: "365px", display: "flex", gap: "40px", flexDirection: "row"}}
                    >
                        <FormControlLabel
                            sx={{ color: theme.palette.grey2.main }}
                            value="1"
                            control={
                                <Radio
                                checkedIcon={<RadioCheck/>}
                                icon={<RadioIcon/>}
                                />
                            }
                            label="Да"
                        />
                        <FormControlLabel
                            sx={{ color: theme.palette.grey2.main }}
                            value="2"
                            control={
                                <Radio
                                    checkedIcon={<RadioCheck/>}
                                    icon={<RadioIcon/>}
                                />
                            }
                            label="Нет"
                        />
                    </RadioGroup>
                </FormControl>
                {value === "1" ?
                    <Box>
                        <Box sx={{display: "flex", gap: "10px", alignItems: "center"}}>
                            <Typography sx={{color: theme.palette.grey2.main}}>Показывать через</Typography>
                            <FormControl
                                fullWidth
                                variant="standard"
                                sx={{ p: 0, width: "60px", }}
                            >
                                <TextField
                                    fullWidth
                                    placeholder="10"
                                    sx={{
                                        "& .MuiInputBase-root": {
                                            backgroundColor: theme.palette.background.default,
                                            height: "48px",
                                            width: "60px",
                                            borderRadius: "10px",

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

                                        }
                                    }}
                                />
                            </FormControl>
                            <Typography sx={{color: theme.palette.grey2.main}}>секунд</Typography>
                        </Box>
                        <Typography sx={{color: theme.palette.grey2.main, fontSize: "14px"}}>Время, через которое квиз автоматически откроется</Typography>
                    </Box>
                    :
                    <></>
                }


                <CustomCheckbox label={"Отключить на мобильных устройствах"}/>
                <CustomCheckbox label={"Полностью скрывать виджет при закрытии"}/>
            </Box>
        </InstallQzOnSiteParent>
    )
}

interface Props {
    Icon: React.ElementType;
    isActive?: boolean;
    onClick: () => void;
}

function SelectButtonPosition({ Icon, isActive = false, onClick }: Props) {
    const theme = useTheme();
    return (
        <Button
            onClick={onClick}
            variant="text"
            startIcon={<Icon color={isActive ? theme.palette.brightPurple.main: theme.palette.grey2.main} />}
            sx={{
                borderRadius: "6px",
                border: "none",
                p: "7px",
                width: "auto",
                minWidth: 0,
                "& .MuiButton-startIcon": {
                    mr: 0,
                    ml: 0,
                },
                "&:hover": {
                    border: "none",
                    borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
                },
            }}
        />
    );
}