import { __ } from '@wordpress/i18n';
import { ToggleControl, PanelBody, RadioControl, TextControl } from '@wordpress/components';

const DeselectControl = ( props ) => {
    const { setAttributes, attributes } = props;
        const { 
            deselectable,
            deselectPosition,
            deselectLabel,
         } = attributes;
            
        return (
            <PanelBody title={__("Deselect", "personalizer")} initialOpen={true}>
                <ToggleControl
                    label={__("Deselectable", "personalizer")}
                    checked={deselectable}
                    onChange={(value) => setAttributes({ deselectable: value })}
                />
                {deselectable && (<>
                <RadioControl
                    label={__("Position")}
                    selected={deselectPosition}
                    onChange={(value) => setAttributes({ deselectPosition: value })}
                    options={[
                        { label: __("Start", "personalizer"), value: "start" },
                        { label: __("End", "personalizer"), value: "end" },
                    ]}
                />
                <TextControl
                    label={__("Label")}
                    value={deselectLabel}
                    onChange={(value) => setAttributes({ deselectLabel: value })}
                />
                </>)}
            </PanelBody>
        );
}

export default DeselectControl;