import React from 'react';
import { __ } from '@wordpress/i18n';
import { GroupContainer } from '@divi/modal';
import { FieldContainer } from '@divi/module';
import {
	ToggleContainer,
	TextContainer,
} from '@divi/field-library';
import { type Module } from '@divi/types';

export const FilterAdditionalSettingsPanel = <T extends Record<string, any>>(
	props: Module.Settings.Panel.Props<T>
): React.ReactElement => {
	const { attrs } = props;

	return (
		<GroupContainer
			id="additional"
			title={__('Additional Settings', 'jet-engine-divi-views')}
		>
			{/* Search */}
			<FieldContainer
				attrName="search_enabled.innerContent"
				label={__('Search Enabled', 'jet-engine-divi-views')}
				description=""
			>
				<ToggleContainer />
			</FieldContainer>

			{attrs?.search_enabled?.innerContent && (
				<FieldContainer
					attrName="search_placeholder.innerContent"
					label={__('Search Placeholder', 'jet-engine-divi-views')}
					description=""
				>
					<TextContainer />
				</FieldContainer>
			)}

			{/* More/Less */}
			<FieldContainer
				attrName="moreless_enabled.innerContent"
				label={__('More/Less Enabled', 'jet-engine-divi-views')}
				description=""
			>
				<ToggleContainer />
			</FieldContainer>

			{attrs?.moreless_enabled?.innerContent && (
				<>
					<FieldContainer
						attrName="less_items_count.innerContent"
						label={__('Less Items Count', 'jet-engine-divi-views')}
						description=""
					>
						<TextContainer type="number" min={1} max={50} />
					</FieldContainer>

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

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

			{/* Dropdown */}
			<FieldContainer
				attrName="dropdown_enabled.innerContent"
				label={__('Dropdown Enabled', 'jet-engine-divi-views')}
				description=""
			>
				<ToggleContainer />
			</FieldContainer>

			{attrs?.dropdown_enabled?.innerContent && (
				<>
					<FieldContainer
						attrName="dropdown_placeholder.innerContent"
						label={__('Placeholder', 'jet-engine-divi-views')}
						description=""
					>
						<TextContainer />
					</FieldContainer>

					<FieldContainer
						attrName="dropdown_n_selected_enabled.innerContent"
						label={__('N Selected', 'jet-engine-divi-views')}
						description=""
					>
						<ToggleContainer />
					</FieldContainer>

					{attrs?.dropdown_n_selected_enabled?.innerContent && (
						<>
							<FieldContainer
								attrName="dropdown_n_selected_number.innerContent"
								label={__('Number of Named Items', 'jet-engine-divi-views')}
								description=""
							>
								<TextContainer type="number" min={0} />
							</FieldContainer>

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

					<FieldContainer
						attrName="dropdown_apply_button.innerContent"
						label={__('Add Apply Button', 'jet-engine-divi-views')}
						description=""
					>
						<ToggleContainer />
					</FieldContainer>

					{attrs?.dropdown_apply_button?.innerContent && (
						<FieldContainer
							attrName="dropdown_apply_button_text.innerContent"
							label={__('Apply Button Text', 'jet-engine-divi-views')}
							description=""
						>
							<TextContainer />
						</FieldContainer>
					)}
				</>
			)}

			{/* Scroll */}
			<FieldContainer
				attrName="scroll_enabled.innerContent"
				label={__('Scroll Enabled', 'jet-engine-divi-views')}
				description=""
			>
				<ToggleContainer />
			</FieldContainer>

			{attrs?.scroll_enabled?.innerContent && (
				<FieldContainer
					attrName="scroll_height.innerContent"
					label={__('Scroll Height (px)', 'jet-engine-divi-views')}
					description=""
				>
					<TextContainer type="number" min={100} max={1000} />
				</FieldContainer>
			)}
		</GroupContainer>
	);
};