import React from 'react';
import { __ } from '@wordpress/i18n';
import { GroupContainer } from '@divi/modal';
import { FieldContainer } from '@divi/module';
import {
	ToggleContainer,
	TextContainer,
	SelectContainer
} from '@divi/field-library';
import { type Module } from '@divi/types';
import {
	buildDefaultAttrsPatch,
	buildDefaultInnerContent,
	convertSimpleOptions,
	getEffectiveAttrValue,
	isToggleEnabled,
} from '../utils';

const indexerShowItemsRule = [
	{ value: 'always', label: __('Always show', 'jet-engine-divi-views') },
	{ value: 'hide', label: __('Hide if empty', 'jet-engine-divi-views') },
];

const indexerChangeItemsRule = [
	{ value: 'replace', label: __('Replace counters', 'jet-engine-divi-views') },
	{ value: 'add', label: __('Add to counters', 'jet-engine-divi-views') },
];

interface Props<T> extends Module.Settings.Panel.Props<T> {
	defaults?: Record<string, any>;
	toggleKeys?: Set<string> | string[];
	selectKeys?: Set<string> | string[];
}

export const FilterIndexerSettingsPanel = <T extends Record<string, any>>(
	props: Props<T>
): React.ReactElement => {
	const { attrs } = props;
	const setAttrs = ( props as unknown as {
		setAttrs?: ( next: Partial<T> ) => void;
	} ).setAttrs || ( props as unknown as {
		setAttributes?: ( next: Partial<T> ) => void;
	} ).setAttributes || ( props as unknown as {
		onChange?: ( next: Partial<T> ) => void;
	} ).onChange;
	const defaults = props.defaults || {
		apply_indexer: false,
		show_counter: false,
		counter_prefix: '(',
		counter_suffix: ')',
		show_items_rule: 'show',
		change_items_rule: 'always',
	};
	const toggleKeys = Array.from( props.toggleKeys || [ 'apply_indexer', 'show_counter' ] );
	const selectKeys = Array.from( props.selectKeys || [ 'show_items_rule', 'change_items_rule' ] );

	React.useEffect( () => {
		const patch = buildDefaultAttrsPatch( {
			attrs,
			defaults,
			toggleKeys,
			selectKeys,
		} );

		if ( Object.keys( patch ).length ) {
			setAttrs?.( patch as Partial<T> );
		}
	}, [ attrs, setAttrs ] );

	const getValue = ( attrName: string ) => getEffectiveAttrValue( {
		attrs,
		key: attrName,
		defaults,
		toggleKeys,
		selectKeys,
	} );

	const applyIndexer = isToggleEnabled( getValue( 'apply_indexer' ) );
	const showCounter  = isToggleEnabled( getValue( 'show_counter' ) );

	return (
		<GroupContainer
			id="indexer"
			title={__('Indexer', 'jet-engine-divi-views')}
		>
			<FieldContainer
				attrName="apply_indexer.innerContent"
				label={__('Apply Indexer', 'jet-engine-divi-views')}
				description=""
			>
				<ToggleContainer
					defaultAttr={ buildDefaultInnerContent( {
						key: 'apply_indexer',
						value: defaults.apply_indexer,
						toggleKeys,
					} ) }
				/>
			</FieldContainer>

			{ applyIndexer && (
				<div>
					<FieldContainer
						attrName="show_counter.innerContent"
						label={__('Show Counter', 'jet-engine-divi-views')}
						description=""
					>
						<ToggleContainer
							defaultAttr={ buildDefaultInnerContent( {
								key: 'show_counter',
								value: defaults.show_counter,
								toggleKeys,
							} ) }
						/>
					</FieldContainer>

					{ showCounter && (
						<div>
							<FieldContainer
								attrName="counter_prefix.innerContent"
								label={__('Counter Prefix', 'jet-engine-divi-views')}
								description=""
							>
								<TextContainer />
							</FieldContainer>

							<FieldContainer
								attrName="counter_suffix.innerContent"
								label={__('Counter Suffix', 'jet-engine-divi-views')}
								description=""
							>
								<TextContainer />
							</FieldContainer>
						</div>
					) }

					<FieldContainer
						attrName="show_items_rule.innerContent"
						label={__('If Item Empty', 'jet-engine-divi-views')}
						description=""
					>
						<SelectContainer options={convertSimpleOptions(indexerShowItemsRule)} />
					</FieldContainer>

					<FieldContainer
						attrName="change_items_rule.innerContent"
						label={__('Change Counters', 'jet-engine-divi-views')}
						description=""
					>
						<SelectContainer options={convertSimpleOptions(indexerChangeItemsRule)} />
					</FieldContainer>
				</div>
			)}
		</GroupContainer>
	);
};
