/**
 * WordPress dependencies
 */
import { TextareaControl, TextControl } from '@safe-wordpress/components';
import { cleanForSlug } from '@safe-wordpress/url';
import { useDispatch, useSelect } from '@safe-wordpress/data';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { PostStatusSlug } from '@nelio-content/types';

/**
 * Internal dependencies
 */
import { store as NC_CUSTOM_STATUSES } from '~/nelio-content-pages/settings/custom-statuses/store';

export const GeneralSettings = (): JSX.Element => {
	const attrs = useSelect(
		( select ) => select( NC_CUSTOM_STATUSES ).getEditingStatus(),
		[]
	);
	const isNew = useSelect(
		( select ) => select( NC_CUSTOM_STATUSES ).isEditingStatusNew(),
		[]
	);

	const { editStatus } = useDispatch( NC_CUSTOM_STATUSES );

	return (
		<>
			<TextControl
				label={ _x( 'Slug', 'text', 'nelio-content' ) }
				value={ attrs?.slug || '' }
				onChange={ ( value ) =>
					editStatus( {
						slug: cleanForSlug( value ) as PostStatusSlug,
					} )
				}
				help={ _x(
					'The unique ID for the post status.',
					'text',
					'nelio-content'
				) }
				disabled={ attrs?.core || ! isNew }
				maxLength={ 20 }
			/>
			<TextControl
				label={ _x( 'Status Label', 'text', 'nelio-content' ) }
				value={ attrs?.name || '' }
				onChange={ ( value ) => editStatus( { name: value } ) }
				help={ _x(
					'A descriptive name for the post status.',
					'text',
					'nelio-content'
				) }
				disabled={ attrs?.core }
			/>
			<TextareaControl
				help={ _x(
					'A description for administrative use, to give some context on what the custom status is to be used for.',
					'text',
					'nelio-content'
				) }
				label={ _x( 'Description', 'text', 'nelio-content' ) }
				onChange={ ( value ) => editStatus( { description: value } ) }
				value={ attrs?.description || '' }
			/>
		</>
	);
};