import React from 'react'
import Block from "./style"
import Switch from '@mui/material/Switch';
import MiniTable from "../../MiniTable"
import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from '@mui/material/Slider';
import { v4 as uuidv4 } from 'uuid'

const FixComponent = () => {


    const useColorConfigStore = useColorConfig((store) => store)

    const marks = [
        {
            value: 1,
            label: '0s',
        },
        {
            value: 50,
            label: '5s',
        },
        {
            value: 100,
            label: '10s',
        }
    ];


    const tableData = [
        {
            id: uuidv4(),
            title: 'Auto answer',
            type: 'row',
            child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
                <Slider
                    aria-label="Restricted values"
                    defaultValue={40}
                    step={null}
                    value={useColorConfigStore.state.autoAnswerSecond || true}
                    marks={marks}
                    onChange={(e) => useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
                />
            </div>,
            inputTag: <Switch
                size={'small'}
                checked={useColorConfigStore.state.autoAnswer}
                onChange={(e) => {
                    return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
                }}
            />,
        }
    ]

    return (<Block>
        {/*<p>Text</p>*/}
        {/*<Switch size={'small'} defaultChecked />*/}
        <MiniTable data={tableData}/>
    </Block>)
}

export default FixComponent
