import {BaseControl, PanelBody, PanelRow, ToggleControl} from '@wordpress/components';
import {useState} from '@wordpress/element';
import {__} from '@wordpress/i18n';

import OptionsHeader from './OptionsHeader';
import OptionsList from './OptionsList';

import {OptionsPanelProps} from './types';

/**
 * @since 3.0.0
 */
export default function Options({multiple, options, setOptions}: OptionsPanelProps) {
    const [showValues, setShowValues] = useState<boolean>(false);
    const {AfterFieldSettingsFill} = window.givewp.form.slots;

    const handleAddOption = (): void => {
        setOptions([...options, {label: '', value: '', checked: false}]);
    };

    return (
        <AfterFieldSettingsFill>
            <PanelBody title={__('Options', 'give-form-field-manager')}>
                <PanelRow>
                    <ToggleControl
                        label={__('Show values', 'give-form-field-manager')}
                        checked={showValues}
                        onChange={() => setShowValues(!showValues)}
                    />
                </PanelRow>
                <PanelRow>
                    <BaseControl id={'give-form-field-manager-options'}>
                        <OptionsHeader handleAddOption={handleAddOption} />
                        <OptionsList
                            {...{
                                options,
                                showValues,
                                multiple,
                                setOptions,
                            }}
                        />
                    </BaseControl>
                </PanelRow>
            </PanelBody>
        </AfterFieldSettingsFill>
    );
}