import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import SwitchData from "./switchData";
import React, {useState} from "react";
import InfoIcon from "../../../assets/icons/InfoIcon";
import SelectableButton from "@ui_kit/SelectableButton";

type dataType = "calendar" | "mask";

interface Props{
    totalIndex: number
}

export default function DataOptions({totalIndex}: Props) {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }

    const [dataType, setDataType] = useState<dataType>("calendar");
    return (
        <>
            <Box
                sx={{
                    width: '100%',
                    maxWidth: '640px',
                    display: 'flex',
                    padding: '20px',
                    flexDirection: 'column',
                    gap: '20px'}}
            >

                <Box sx={{gap: '10px', display: 'flex'}}>
                    <SelectableButton isSelected={dataType === "calendar"} onClick={() => setDataType("calendar")}>
                        Использовать календарь
                    </SelectableButton>
                    <SelectableButton isSelected={dataType === "mask"} onClick={() => setDataType("mask")}>
                        Использовать маску
                    </SelectableButton>
                </Box>
                <Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
                    <Typography sx={{
                        fontWeight: 400,
                        fontSize: '16px',
                        lineHeight: '18.96px',
                        color: theme.palette.grey2.main
                    }}>Пользователю будет предложено выбрать дату</Typography>
                    <InfoIcon/>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
            <SwitchData switchState={switchState}/>
        </>
    )
}