import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import SwitchSlider from "./switchSlider";

interface Props{
    totalIndex: number
}

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

    return (
        <>
            <Box
                sx={{
                    width: '100%',
                    maxWidth: '640px',
                    display: 'flex',
                    padding: '20px',
                    flexDirection: 'column',
                    gap: '20px'}}
            >

                <Box sx={{gap: '10px', display: 'flex', flexDirection: 'column'}}>
                    <Typography>Выбор значения из диапазона</Typography>
                    <Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}>
                        <CustomTextField placeholder={'0'} text={''}/>
                        <Typography>—</Typography>
                        <CustomTextField placeholder={'100'} text={''}/>
                    </Box>
                </Box>
                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
                    <Box>
                        <Typography>Начальное значение</Typography>
                        <CustomTextField placeholder={'50'} text={''}/>
                    </Box>
                    <Box>
                        <Typography>Шаг</Typography>
                        <CustomTextField placeholder={'1'} text={''}/>
                    </Box>

                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
            <SwitchSlider switchState={switchState}/>
        </>
    )
}