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

/**
 * External dependencies
 */
import { store as NC_DATA } from '@nelio-content/data';
import type { Role, RoleId } from '@nelio-content/types';

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

export const RolesSettings = (): JSX.Element => {
	const roles = useSelect( ( select ) => select( NC_DATA ).getRoles(), [] );

	const attrs = useSelect(
		( select ) => select( NC_CUSTOM_STATUSES ).getEditingStatus(),
		[]
	);
	const { editStatus } = useDispatch( NC_CUSTOM_STATUSES );

	const isAdminRole = ( role: Role ) => role.isAdmin;

	const [ checkedRoles, setCheckedRoles ] = useState< RoleId[] >(
		roles
			.filter(
				( r ) =>
					'all-roles' === attrs.roles ||
					attrs.roles.includes( r.id ) ||
					isAdminRole( r )
			)
			.map( ( r ) => r.id )
	);

	if ( attrs.roles === 'all-roles' ) {
		return (
			<>
				<p>
					{ _x(
						'This status can be assigned by users of any role.',
						'user',
						'nelio-content'
					) }
				</p>
				<Button
					variant="secondary"
					size="small"
					onClick={ () => {
						const updatedRoles = roles
							.filter( ( r ) => isAdminRole( r ) )
							.map( ( r ) => r.id );
						setCheckedRoles( updatedRoles );
						void editStatus( { roles: updatedRoles } );
					} }
				>
					{ _x(
						'Limit to specific user roles',
						'command',
						'nelio-content'
					) }
				</Button>
			</>
		);
	}

	return (
		<>
			<p>
				{ _x(
					'Choose which user roles can assign this status to a post:',
					'user',
					'nelio-content'
				) }
			</p>
			<ul className="nelio-content-status-editor__roles">
				<li className="nelio-content-status-editor__role nelio-content-status-editor__role--all">
					<CheckboxControl
						label={ _x( 'All Roles', 'text', 'nelio-content' ) }
						onChange={ ( _ ) => {
							void editStatus( {
								roles: 'all-roles',
							} );
						} }
					/>
				</li>
				{ roles.map( ( r ) => (
					<Role
						key={ `nelio-content-status-editor__role-${ r.id }` }
						id={ r.id }
						isChecked={
							checkedRoles.includes( r.id ) || isAdminRole( r )
						}
						isDisabled={ attrs?.core || isAdminRole( r ) }
						onChange={ ( checked ) => {
							const updatedRoles = checked
								? [ ...( checkedRoles || [] ), r.id ]
								: ( checkedRoles || [] ).filter(
										( id ) => id !== r.id
								  );
							setCheckedRoles( updatedRoles );
							void editStatus( {
								roles: updatedRoles,
							} );
						} }
					/>
				) ) }
			</ul>
		</>
	);
};

// ============
// HELPER VIEWS
// ============

type RoleProps = {
	readonly id: RoleId;
	readonly isChecked: boolean;
	readonly isDisabled: boolean;
	readonly onChange: ( checked: boolean ) => void;
};

const Role = ( {
	id,
	isChecked,
	onChange,
	isDisabled,
}: RoleProps ): JSX.Element | null => {
	const role = useSelect(
		( select ) => select( NC_DATA ).getRole( id ),
		[ id ]
	);

	if ( ! role ) {
		return null;
	}

	const { name } = role;

	return (
		<li
			className={ clsx(
				`nelio-content-status-editor__role nelio-content-status-editor__role--${ id }`,
				{
					'nelio-content-status-editor__role--is-disabled':
						isDisabled,
				}
			) }
		>
			<CheckboxControl
				label={ name }
				checked={ isChecked }
				disabled={ isDisabled }
				onChange={ onChange }
			/>
		</li>
	);
};