// 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 { DynamicMetaAttrs } from './types';
import {
	convertSimpleOptions,
	buildDefaultInnerContent,
	buildDefaultAttrsPatch,
	getBlockDefaultsFromSchema,
	getEffectiveAttrValue,
	isToggleEnabled as isToggleEnabledValue,
} from '../../utils';

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

const DYNAMIC_META_DEFAULTS_FALLBACK: Record<string, any> = {
	date_enabled: true,
	date_selected_icon: 0,
	date_selected_icon_url: '',
	date_prefix: '',
	date_suffix: '',
	date_format: 'F-j-Y',
	date_link: 'archive',
	author_enabled: true,
	author_selected_icon: 0,
	author_selected_icon_url: '',
	author_prefix: '',
	author_suffix: '',
	author_link: 'archive',
	comments_enabled: true,
	comments_selected_icon: 0,
	comments_selected_icon_url: '',
	comments_prefix: '',
	comments_suffix: '',
	comments_link: 'single',
	zero_comments_format: '0',
	one_comment_format: '1',
	more_comments_format: '%',
	layout: 'inline',
};

const DYNAMIC_META_SELECT_ATTRS = new Set( [
	'date_link',
	'author_link',
	'comments_link',
	'layout',
] );

const DYNAMIC_META_TOGGLE_ATTRS = new Set( [
	'date_enabled',
	'author_enabled',
	'comments_enabled',
] );

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

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

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

		const next = buildDefaultAttrsPatch( {
			attrs,
			defaults: getBlockDefaultsFromSchema( 'dynamicMeta', DYNAMIC_META_DEFAULTS_FALLBACK ),
			toggleKeys: DYNAMIC_META_TOGGLE_ATTRS,
			selectKeys: DYNAMIC_META_SELECT_ATTRS,
		} );

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

	const dynamicMetaDefaults = getBlockDefaultsFromSchema( 'dynamicMeta', DYNAMIC_META_DEFAULTS_FALLBACK );
	const getToggleDefaultAttr = ( key: string ) => {
		return buildDefaultInnerContent( {
			key,
			value: dynamicMetaDefaults[ key ],
			toggleKeys: DYNAMIC_META_TOGGLE_ATTRS,
			selectKeys: DYNAMIC_META_SELECT_ATTRS,
		} );
	};
	const isMetaSectionEnabled = ( key: 'date_enabled' | 'author_enabled' | 'comments_enabled' ) => {
		return isToggleEnabledValue( getEffectiveAttrValue( {
			attrs,
			key,
			defaults: dynamicMetaDefaults,
			toggleKeys: DYNAMIC_META_TOGGLE_ATTRS,
			selectKeys: DYNAMIC_META_SELECT_ATTRS,
		} ) );
	};

	return <React.Fragment>
		<GroupContainer
			id="general"
			title={__('General', 'jet-engine-divi-views')}
		>

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

				{ isMetaSectionEnabled( 'date_enabled' ) &&
				<div className="et-vb-field">
					<FieldContainer
						attrName="date_selected_icon_url.innerContent"
						label={__('Field Icon/Image', 'jet-engine-divi-views')}
						description={__('Image/icon to add before field value', 'jet-engine-divi-views')}
						features={{
							sticky: false,
						}}
					>
						<UploadContainer />
					</FieldContainer>
					<FieldContainer
						attrName="date_prefix.innerContent"
						label={ __('Prefix', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="date_suffix.innerContent"
						label={ __('Suffix', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="date_format.innerContent"
						label={ __('Format', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="date_link.innerContent"
						label={ __('Link', 'jet-engine-divi-views') }
						description={''}
					>
						<SelectContainer
							options={ convertSimpleOptions( [
								{
									value: 'archive',
									label: __( "Archive" ),
								},
								{
									value: 'single',
									label: __( "Post" ),
								},
								{
									value: 'no-link',
									label: __( "None" ),
								},
							] ) }
						/>
					</FieldContainer>
				</div>
			}

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

				{ isMetaSectionEnabled( 'author_enabled' ) &&
				<div className="et-vb-field">
					<FieldContainer
						attrName="author_selected_icon_url.innerContent"
						label={__('Field Icon/Image', 'jet-engine-divi-views')}
						description={__('Image/icon to add before field value', 'jet-engine-divi-views')}
						features={{
							sticky: false,
						}}
					>
						<UploadContainer />
					</FieldContainer>
					<FieldContainer
						attrName="author_prefix.innerContent"
						label={ __('Prefix', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="author_suffix.innerContent"
						label={ __('Suffix', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="author_link.innerContent"
						label={ __('Link', 'jet-engine-divi-views') }
						description={''}
					>
						<SelectContainer
							options={ convertSimpleOptions( [
								{
									value: 'archive',
									label: __( "Archive" ),
								},
								{
									value: 'single',
									label: __( "Post" ),
								},
								{
									value: 'no-link',
									label: __( "None" ),
								},
							] ) }
						/>
					</FieldContainer>
				</div>
			}

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

				{ isMetaSectionEnabled( 'comments_enabled' ) &&
				<div className="et-vb-field">
					<FieldContainer
						attrName="comments_selected_icon_url.innerContent"
						label={__('Field Icon/Image', 'jet-engine-divi-views')}
						description={__('Image/icon to add before field value', 'jet-engine-divi-views')}
						features={{
							sticky: false,
						}}
					>
						<UploadContainer />
					</FieldContainer>
					<FieldContainer
						attrName="comments_prefix.innerContent"
						label={ __('Prefix', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="comments_suffix.innerContent"
						label={ __('Suffix', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="comments_link.innerContent"
						label={ __('Link', 'jet-engine-divi-views') }
						description={''}
					>
						<SelectContainer
							options={ convertSimpleOptions( [
								{
									value: 'single',
									label: __( "Post" ),
								},
								{
									value: 'no-link',
									label: __( "None" ),
								},
							] ) }
						/>
					</FieldContainer>
					<FieldContainer
						attrName="zero_comments_format.innerContent"
						label={ __('Zero Comments Format', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="one_comment_format.innerContent"
						label={ __('One Comments Format', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
					<FieldContainer
						attrName="more_comments_format.innerContent"
						label={ __('More Comments Format', 'jet-engine-divi-views') }
						description={ '' }
					>
						<TextContainer/>
					</FieldContainer>
				</div>
			}

		</GroupContainer>

		<GroupContainer
			id="layout"
			title={__('Layout', 'jet-engine-divi-views')}
		>
			<FieldContainer
				attrName="layout.innerContent"
				label={ __('Layout', 'jet-engine-divi-views') }
				description={''}
			>
				<SelectContainer
					options={ convertSimpleOptions( [
						{
							value: 'inline',
							label: __( "Inline" ),
						},
						{
							value: 'list',
							label: __( "List" ),
						},
					] ) }
				/>
			</FieldContainer>
		</GroupContainer>
		<AdminLabelGroup
			defaultGroupAttr={defaultSettingsAttrs?.module?.meta?.adminLabel}
		/>
	</React.Fragment>
};
