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

export function SettingsPanel( { attributes, setAttributes } ) {
	const { tagName = 'ul', start = 1, reversed = false } = attributes;
	const isOrdered = tagName === 'ol';

	return (
		<PanelBody title={ __( 'List Block', 'axcelersblocks' ) } initialOpen>
			<ListTag
				value={ tagName }
				onChange={ ( val ) =>
					setAttributes( {
						tagName: val,
						start: val === 'ol' ? start : 1,
						reversed: val === 'ol' ? reversed : false,
					} )
				}
			/>

			{ isOrdered && (
				<>
					<TextControl
						label={ __( 'Start from', 'axcelersblocks' ) }
						type="number"
						min={ 1 }
						value={ start }
						onChange={ ( value ) => {
							const parsedValue = parseInt( value, 10 );
							setAttributes( {
								start:
									Number.isNaN( parsedValue ) || parsedValue < 1
										? 1
										: parsedValue,
							} );
						} }
					/>

					<ToggleControl
						label={ __( 'Reverse numbering', 'axcelersblocks' ) }
						checked={ !! reversed }
						onChange={ ( value ) => setAttributes( { reversed: value } ) }
					/>
				</>
			) }
		</PanelBody>
	);
}
