// External dependencies.
import React, { ReactElement, useEffect } from 'react';

// WordPress dependencies.
import { __ } from '@wordpress/i18n';

// Divi dependencies.
import {
	AdminLabelGroup,
	FieldContainer,
} from '@divi/module';
import { GroupContainer } from '@divi/modal';
import {
	SelectContainer,
	TextContainer,
} from '@divi/field-library';
import { type Module } from '@divi/types';

// Local dependencies.
import { RemoveFiltersAttrs } from './types';
import {
	buildDefaultAttrsPatch,
	convertObjectOptions,
	convertSimpleOptions,
} from '../../utils';

declare global {
	interface Window {
		JSFDiviViews: any;
	}
}

const REMOVE_FILTERS_DEFAULTS: Record<string, any> = {
	content_provider: 'not-selected',
	apply_type: 'ajax',
	remove_filters_text: __( 'Remove filters', 'jet-engine-divi-views' ),
	query_id: '',
	additional_providers_enabled: false,
	additional_providers_list: [
		{
			additional_provider: '',
			additional_providers_list: '',
		},
	],
};

const REMOVE_FILTERS_SELECT_ATTRS = new Set( [
	'content_provider',
	'apply_type',
] );

const REMOVE_FILTERS_TOGGLE_ATTRS = new Set( [
	'additional_providers_enabled',
] );

const getAvailableProviders = () => {
	const providers = window.JSFDiviViews?.providers || {};
	return convertObjectOptions( providers );
};

export const SettingsContent = (props: Module.Settings.Panel.Props<RemoveFiltersAttrs>): ReactElement => {
	const {
		defaultSettingsAttrs,
		attrs,
	} = props;
	const setAttrs = (
		(props as unknown as { setAttrs?: (next: Partial<RemoveFiltersAttrs>) => void; setAttributes?: (next: Partial<RemoveFiltersAttrs>) => void }).setAttrs
		|| (props as unknown as { setAttributes?: (next: Partial<RemoveFiltersAttrs>) => void; onChange?: (next: Partial<RemoveFiltersAttrs>) => void }).setAttributes
		|| (props as unknown as { onChange?: (next: Partial<RemoveFiltersAttrs>) => void }).onChange
	);

	useEffect( () => {
		if ( ! setAttrs ) {
			return;
		}

		const next = buildDefaultAttrsPatch( {
			attrs,
			defaults: REMOVE_FILTERS_DEFAULTS,
			toggleKeys: REMOVE_FILTERS_TOGGLE_ATTRS,
			selectKeys: REMOVE_FILTERS_SELECT_ATTRS,
		} );

		if ( Object.keys( next ).length ) {
			setAttrs( next );
		}
	}, [ attrs, setAttrs ] );

	return (
		<React.Fragment>
			<GroupContainer
				id="general"
				title={__('General', 'jet-engine-divi-views')}
			>
				<FieldContainer
					attrName="content_provider.innerContent"
					label={__('This filter for', 'jet-engine-divi-views')}
					description=""
				>
					<SelectContainer options={getAvailableProviders()} />
				</FieldContainer>

				<FieldContainer
					attrName="apply_type.innerContent"
					label={__('Apply type', 'jet-engine-divi-views')}
					description=""
				>
					<SelectContainer
						options={convertSimpleOptions([
							{ value: 'ajax', label: __('AJAX', 'jet-engine-divi-views') },
							{ value: 'reload', label: __('Page reload', 'jet-engine-divi-views') },
						])}
					/>
				</FieldContainer>

				<FieldContainer
					attrName="query_id.innerContent"
					label={__('Query ID', 'jet-engine-divi-views')}
					description={__(
						'Set unique query ID if you use multiple blocks of same provider on the page.',
						'jet-engine-divi-views'
					)}
				>
					<TextContainer />
				</FieldContainer>

				<FieldContainer
					attrName="remove_filters_text.innerContent"
					label={__('Remove button text', 'jet-engine-divi-views')}
					description=""
				>
					<TextContainer />
				</FieldContainer>
			</GroupContainer>

			<AdminLabelGroup
				defaultGroupAttr={defaultSettingsAttrs?.module?.meta?.adminLabel}
			/>
		</React.Fragment>
	);
};
