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

const StyleComponent = () => {

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

    const marks = [{
        value: 0, label: <span style={{ fontSize: 12 }}>none</span>,
    }, {
        value: 25, label: <span style={{ fontSize: 12 }}>+2px</span>,
    }, {
        value: 50, label: <span style={{ fontSize: 12 }}>+3px</span>,
    }, {
        value: 75, label: <span style={{ fontSize: 12 }}>+4px</span>,
    }, {
        value: 100, label: <span style={{ fontSize: 12 }}>+5px</span>,
    }];

    const tableData = [{
        id: uuidv4(), title: 'Show version', type: 'row', inputTag: <Checkbox
            defaultChecked={typeof useColorConfigStore.state.showVersion === 'undefined' ? true : useColorConfigStore.state.showVersion}
            onChange={(e) => useColorConfigStore.setColor({ name: 'showVersion', value: e.target.checked })} />
    }, {
        id: uuidv4(),
        title: 'Font size of Boxdialer',
        type: 'column',
        child: <div style={{ padding: '0 20px 0 15px' }}><Slider
            aria-label="Restricted values"
            defaultValue={50}
            step={null}
            value={typeof useColorConfigStore.state.sizePixel === 'undefined' ? 1 : useColorConfigStore.state.sizePixel}
            marks={marks}
            onChange={(e) => useColorConfigStore.setColor({ name: 'sizePixel', value: e.target.value })}
        /></div>
    }, {
        id: uuidv4(), title: 'Switch On/Off anm.', type: 'row', inputTag: <Checkbox
            defaultChecked={typeof useColorConfigStore.state.switchAnim === 'undefined' ? true : useColorConfigStore.state.switchAnim}
            onChange={(e) => useColorConfigStore.setColor({ name: 'switchAnim', value: e.target.checked })} />
    },]

    return (
        <StyleBlock>
            <MiniTable data={tableData} gap={'10px'} />
        </StyleBlock>
    )
}

export default StyleComponent
