import { useState } from 'react';

import Switch from '@mui/material/Switch';
import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@mui/material/FormGroup';
import AddBoxIcon from '@mui/icons-material/AddBox';
import FormControlLabel from '@mui/material/FormControlLabel';
import AddBoxTwoToneIcon from '@mui/icons-material/AddBoxTwoTone';
// ----------------------------------------------------------------------

type BoolFilterProps = {
    label: string;
}

export function BoolFilter({ label }: BoolFilterProps) {
    const [disabled, setDisabled] = useState<boolean>(true);

    return (
        <FormGroup row>
            <Checkbox
                {...{ inputProps: { 'aria-label': 'Checkbox demo' } }}
                icon={<AddBoxTwoToneIcon />}
                checkedIcon={<AddBoxIcon />}
                onClick={() => setDisabled(!disabled)}
            />
            {
                disabled
                    ? <FormControlLabel disabled control={<Switch />} label={label} />
                    : <FormControlLabel control={<Switch />} label={label} />
            }
        </FormGroup>
    );
}