import { createBoard } from '@wixc3/react-board';
import { Label, Switch, type SwitchProps } from '@blueprintjs/core';
import { useState } from 'react';

// board cover
import cover from '../../../../assets/form-controls/switch.svg';

export default createBoard({
    name: 'Switch',
    Board: () => {
        const [checkboxes, setCheckboxes] = useState<SwitchProps[]>([
            { name: 'Enabled', checked: false },
            { name: 'Public', checked: false },
            { name: 'Cooperative', checked: true },
        ]);

        const handleChange = (option: SwitchProps) => {
            setCheckboxes((prev) =>
                prev.map((checkbox) =>
                    checkbox.name === option.name
                        ? { ...option, checked: !option.checked }
                        : checkbox
                )
            );
        };

        return (
            <>
                <Label>Privacy Settings</Label>
                {checkboxes.map((option) => (
                    <Switch
                        label={option.name}
                        checked={option.checked}
                        onChange={() => handleChange(option)}
                    />
                ))}
                <Switch label="Uncontrolled" checked />
            </>
        );
    },
    tags: ['switch', 'form', 'controls'],
    cover,
});
