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

/**
 * External dependencies
 */
import { ColorPickerDropdown, IconSelector } from '@nelio-content/components';

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

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

	const { editStatus } = useDispatch( NC_CUSTOM_STATUSES );

	return (
		<>
			<div className="nelio-content-status-editor__color-pickers">
				<ColorPickerDropdown
					label={ _x( 'Main Color', 'text', 'nelio-content' ) }
					id="nelio-content-status-editor__main-color"
					value={ attrs?.colors?.main }
					onChange={ ( color ) =>
						editStatus( {
							colors: { ...attrs.colors, main: color },
						} )
					}
				/>
				<ColorPickerDropdown
					label={ _x( 'Background Color', 'text', 'nelio-content' ) }
					id="nelio-content-status-editor__background-color"
					value={ attrs?.colors?.background }
					onChange={ ( color ) =>
						editStatus( {
							colors: { ...attrs.colors, background: color },
						} )
					}
				/>
			</div>
			<IconSelector
				className="nelio-content-status-editor__icon-selector"
				label={ _x( 'Icon', 'text', 'nelio-content' ) }
				help={ _x(
					'An icon to represent the post status.',
					'text',
					'nelio-content'
				) }
				icon={ attrs.icon }
				onChange={ ( value ) => editStatus( { icon: value } ) }
			/>
		</>
	);
};