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

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

// Divi dependencies.
import {
	AdminLabelGroup,
	BackgroundGroup,
	FieldContainer,
	LinkGroup,
} from '@divi/module';
import { GroupContainer } from '@divi/modal';
import {
	TextContainer,
	ToggleContainer,
	SelectContainer,
	UploadContainer,
} from '@divi/field-library';
import {
	type Module,
} from '@divi/types';
import { DynamicTermsAttrs } from './types';
import {
	convertSimpleOptions,
	convertGroupedOptions,
	buildDefaultInnerContent,
	buildDefaultAttrsPatch,
	getBlockDefaultsFromSchema,
	isToggleEnabled as isToggleEnabledValue,
} from '../../utils';

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

const DYNAMIC_TERMS_DEFAULTS_FALLBACK: Record<string, any> = {
	from_tax: '',
	show_all_terms: true,
	terms_num: 1,
	terms_delimiter: ',',
	terms_linked: true,
	selected_terms_icon: 0,
	selected_terms_icon_url: '',
	terms_prefix: '',
	terms_suffix: '',
	orderby: 'name',
	order: 'ASC',
	hide_if_empty: false,
	field_fallback: '',
	object_context: 'default_object',
};

const DYNAMIC_TERMS_SELECT_ATTRS = new Set( [
	'from_tax',
	'orderby',
	'order',
	'object_context',
] );

const DYNAMIC_TERMS_TOGGLE_ATTRS = new Set( [
	'show_all_terms',
	'terms_linked',
	'hide_if_empty',
] );

export const SettingsContent = ( props: Module.Settings.Panel.Props<DynamicTermsAttrs> ): ReactElement => {

	const {
		defaultSettingsAttrs,
		attrs
	} = props;
	const setAttrs = ( ( props as unknown as {
		setAttrs?: ( next: Partial<DynamicTermsAttrs> ) => void;
		setAttributes?: ( next: Partial<DynamicTermsAttrs> ) => void;
	} ).setAttrs || ( props as unknown as {
		onChange?: ( next: Partial<DynamicTermsAttrs> ) => void;
		setAttributes?: ( next: Partial<DynamicTermsAttrs> ) => void;
	} ).setAttributes || ( props as unknown as {
		onChange?: ( next: Partial<DynamicTermsAttrs> ) => void;
	} ).onChange );

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

		const next = buildDefaultAttrsPatch( {
			attrs,
			defaults: getBlockDefaultsFromSchema( 'dynamicTerms', DYNAMIC_TERMS_DEFAULTS_FALLBACK ),
			toggleKeys: DYNAMIC_TERMS_TOGGLE_ATTRS,
			selectKeys: DYNAMIC_TERMS_SELECT_ATTRS,
		} );

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

	const dynamicTermsDefaults = getBlockDefaultsFromSchema( 'dynamicTerms', DYNAMIC_TERMS_DEFAULTS_FALLBACK );
	const getToggleDefaultAttr = ( key: string ) => {
		return buildDefaultInnerContent( {
			key,
			value: dynamicTermsDefaults[ key ],
			toggleKeys: DYNAMIC_TERMS_TOGGLE_ATTRS,
			selectKeys: DYNAMIC_TERMS_SELECT_ATTRS,
		} );
	};
   
	return <React.Fragment>
		<GroupContainer
			id="general"
			title={__('General', 'jet-engine-divi-views')}
		>
			<FieldContainer
				attrName="from_tax.innerContent"
				label={ __('From taxonomy', 'jet-engine-divi-views') }
				description={__('', 'jet-engine-divi-views')}
			>
				<SelectContainer
					options={ convertGroupedOptions( window.JetEngineDiviViews.taxonomies ) }
				/>
			</FieldContainer>

			<FieldContainer
				attrName="show_all_terms.innerContent"
				label={ __('Show all terms', 'jet-engine-divi-views') }
				description={__('', 'jet-engine-divi-views')}
				defaultAttr={ getToggleDefaultAttr( 'show_all_terms' ) }
			>
				<ToggleContainer />
			</FieldContainer>

			{ ! isToggleEnabledValue( attrs?.show_all_terms?.innerContent?.desktop?.value ) &&
				<FieldContainer
					attrName="terms_num.innerContent"
					label={ __('Terms number to show', 'jet-engine-divi-views') }
					description={ __('', 'jet-engine-divi-views') }
				>
					<TextContainer type="number" min={1} max={20} />
				</FieldContainer>
			}

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

			<FieldContainer
				attrName="terms_linked.innerContent"
				label={ __('Linked terms', 'jet-engine-divi-views') }
				description={__('', 'jet-engine-divi-views')}
				defaultAttr={ getToggleDefaultAttr( 'terms_linked' ) }
			>
				<ToggleContainer />
			</FieldContainer>

			<FieldContainer
				attrName="selected_terms_icon_url.innerContent"
				label={__('Icon', 'jet-engine-divi-views')}
				description={__('', 'jet-engine-divi-views')}
				features={{
					sticky: false,
				}}
			>
				<UploadContainer />
			</FieldContainer>

			<FieldContainer
				attrName="terms_prefix.innerContent"
				label={ __('Text before terms list', 'jet-engine-divi-views') }
				description={ __('', 'jet-engine-divi-views') }
			>
				<TextContainer/>
			</FieldContainer>

			<FieldContainer
				attrName="terms_suffix.innerContent"
				label={ __('Text after terms list', 'jet-engine-divi-views') }
				description={ __('', 'jet-engine-divi-views') }
			>
				<TextContainer/>
			</FieldContainer>

			<FieldContainer
				attrName="orderby.innerContent"
				label={ __('Order By', 'jet-engine-divi-views') }
				description={''}
			>
				<SelectContainer
					options={ convertSimpleOptions( [
						{
							value: 'name',
							label: __( 'Name' ),
						},
						{
							value: 'slug',
							label: __( 'Slug' ),
						},
						{
							value: 'term_group',
							label: __( 'Term Group' ),
						},
						{
							value: 'term_id',
							label: __( 'Term ID' ),
						},
						{
							value: 'description',
							label: __( 'Description' ),
						},
						{
							value: 'parent',
							label: __( 'Parent' ),
						},
						{
							value: 'term_order',
							label: __( 'Term Order' ),
						},
						{
							value: 'count',
							label: __( 'By the number of objects associated with the term' ),
						},
					] ) }
				/>
			</FieldContainer>

			<FieldContainer
				attrName="order.innerContent"
				label={ __('Order', 'jet-engine-divi-views') }
				description={''}
			>
				<SelectContainer
					options={ convertSimpleOptions( [
						{
							value: 'ASC',
							label: __( 'ASC' ),
						},
						{
							value: 'DESC',
							label: __( 'DESC' ),
						},
					] ) }
				/>
			</FieldContainer>

			<FieldContainer
				attrName="hide_if_empty.innerContent"
				label={ __('Hide if value is empty', 'jet-engine-divi-views') }
				description={__('', 'jet-engine-divi-views')}
				defaultAttr={ getToggleDefaultAttr( 'hide_if_empty' ) }
			>
				<ToggleContainer />
			</FieldContainer>

			{ ! isToggleEnabledValue( attrs?.hide_if_empty?.innerContent?.desktop?.value ) &&
				<FieldContainer
					attrName="field_fallback.innerContent"
					label={ __('Fallback', 'jet-engine-divi-views') }
					description={ __('', 'jet-engine-divi-views') }
				>
					<TextContainer/>
				</FieldContainer>
			}

			<FieldContainer
				attrName="object_context.innerContent"
				label={ __('Context', 'jet-engine-divi-views') }
				description={__('Select the context to get the value from', 'jet-engine-divi-views')}
			>
				<SelectContainer
					options={ convertSimpleOptions( window.JetEngineDiviViews.allowedContextList ) }
				/>
			</FieldContainer>


		</GroupContainer>

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