// External dependencies.
import React, { ReactElement } 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 { HiddenAttrs } from './types';
import {
	convertObjectOptions,
	convertSimpleOptions,
} from '../../utils';

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

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

const applyTypeOptions = convertSimpleOptions([
	{ value: 'ajax', label: __('AJAX', 'jet-engine-divi-views') },
	{ value: 'mixed', label: __('AJAX + page reload', 'jet-engine-divi-views') },
]);

const argumentTypeOptions = convertSimpleOptions([
	{ value: 'plain', label: __('Plain', 'jet-engine-divi-views') },
	{ value: 'tax', label: __('Taxonomy', 'jet-engine-divi-views') },
	{ value: 'meta', label: __('Meta', 'jet-engine-divi-views') },
]);

export const SettingsContent = (props: Module.Settings.Panel.Props<HiddenAttrs>): ReactElement => {
	const {
		defaultSettingsAttrs,
	} = props;

	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={applyTypeOptions} />
				</FieldContainer>

				<FieldContainer
					attrName="argument_type.innerContent"
					label={__('Argument Type', 'jet-engine-divi-views')}
					description=""
				>
					<SelectContainer options={argumentTypeOptions} />
				</FieldContainer>

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

				<FieldContainer
					attrName="argument_value.innerContent"
					label={__('Value', 'jet-engine-divi-views')}
					description=""
				>
					<TextContainer />
				</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>
			</GroupContainer>

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