import { __ } from '@wordpress/i18n';
import { memo } from '@wordpress/element';
import { Icon, SelectControl, Tooltip } from '@wordpress/components';
import MultiSelectCombobox from '../../shared/MultiSelectCombobox';

type LianaMailerListSelectProps = {
	errorFields: string[];
	formStateSettings: {
		site?: string;
		enabled?: boolean;
		lists?: string[];
	} | null;
	lianaMailerData: {
		[ siteDomain: string ]: {
			lists: { id: string; name: string }[];
		};
	} | null;
	onListChange: ( value: string | string[] ) => void;
};

const LianaMailerListSelect = memo( ( props: LianaMailerListSelectProps ) => {
	const { errorFields, formStateSettings, lianaMailerData, onListChange } =
		props;

	const hasSite =
		formStateSettings && formStateSettings.site && lianaMailerData;
	// @ts-ignore
	const siteData = hasSite ? lianaMailerData[ formStateSettings.site ] : {};

	// If no site is selected or lianaMailerData is not available, show disabled select.
	if (
		! formStateSettings?.enabled ||
		! hasSite ||
		! siteData ||
		! siteData?.lists ||
		! siteData?.lists?.length
	) {
		const label =
			! hasSite || ! formStateSettings?.enabled
				? __( 'Select mailing lists', 'liana-with-growthstack' )
				: __( 'No lists found for this site', 'liana-with-growthstack' );
		// If no site is selected, show disabled select.
		return (
			<SelectControl
				className={ `gs-select-control${
					errorFields.includes( 'lists' )
						? ' gs-select-control--error'
						: ''
				}` }
				disabled={ true }
				label={
					<>
						{ __( 'Mailing Lists', 'liana-with-growthstack' ) }
						<Tooltip
							text={ __(
								'LianaMailer mailing lists which user can join upon subscription',
								'liana-with-growthstack'
							) }
							delay={ 50 }
							hideOnClick={ true }
						>
							<Icon icon="info" style={ { marginLeft: '4px' } } />
						</Tooltip>
					</>
				}
				options={ [
					{
						label,
						value: '',
					},
				] }
				value=""
			/>
		);
	}

	const options = siteData.lists.map( ( list: any ) => ( {
		label: list.name,
		// Transform int values to string to match MultiSelectCombobox value type.
		value: String( list.id ),
	} ) );

	const selectedCount = formStateSettings?.lists?.length ?? 0;

	const emptyLabel =
		selectedCount +
		' ' +
		( selectedCount === 1
			? __( 'list selected - Select or search…', 'liana-with-growthstack' )
			: __( 'lists selected - Select or search…', 'liana-with-growthstack' ) );

	return (
		<MultiSelectCombobox
			className={ `gs-select-control gs-select-control--multiple${
				errorFields.includes( 'lists' )
					? ' gs-select-control--error'
					: ''
			}` }
			disabled={ ! formStateSettings?.enabled }
			emptyLabel={ emptyLabel }
			label={
				<>
					{ __( 'Mailing Lists', 'liana-with-growthstack' ) }
					<Tooltip
						delay={ 50 }
						hideOnClick={ true }
						text={ __(
							"Select one or more mailing lists the submitting contact should be added to. Only lists marked as 'Subscribable' within your chosen Subscription Site in LianaMailer will appear here. If a list is missing, select different Subscription Site or update Subscription site settings in LianaMailer.",
							'liana-with-growthstack'
						) }
					>
						<Icon
							icon="info"
							style={ { marginLeft: '4px' } }
							size={ 16 }
						/>
					</Tooltip>
				</>
			}
			multiple={ true }
			onChange={ onListChange }
			options={ options }
			value={ formStateSettings.lists || [] }
		/>
	);
} );

export default LianaMailerListSelect;