// 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,
	TextAreaContainer,
	ToggleContainer,
	SelectContainer,
	IconPickerContainer
} from '@divi/field-library';
import {
	type Module,
} from '@divi/types';
import { ActiveFiltersAttrs } from './types';
import {
	buildDefaultAttrsPatch,
	convertObjectOptions,
	convertSimpleOptions,
	getEffectiveAttrValue,
} from '../../utils';

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

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

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

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

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

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

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

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

		const next = buildDefaultAttrsPatch( {
			attrs,
			defaults: ACTIVE_FILTERS_DEFAULTS,
			toggleKeys: ACTIVE_FILTERS_TOGGLE_ATTRS,
			selectKeys: ACTIVE_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="filters_label.innerContent"
                label={__('Label', 'jet-engine-divi-views')}
                description={''}
            >
                <TextContainer />
            </FieldContainer>

        </GroupContainer>

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