import {
	Modal,
	Panel,
	PanelBody,
	Button,
	ToggleControl,
	SelectControl,
	TextControl,
	RangeControl,
	Spinner,
	Notice,
	__experimentalBoxControl as BoxControl,
} from "@wordpress/components";
import { ColorPalette } from "@wordpress/components";
import SvgMediaControl from "./SvgMediaControl";
import DynamicVisibilityControl from "./dynamic-visibility/ui/DynamicVisibilityControl";
import { getCfg, normalizeCustomMegaMenuWidthValue } from "./MetaModalHelpers";

const cfg = getCfg();
const rolesOptions = cfg.rolesOptions || [];

const COLORS = [
	{ name: "Black", color: "#000000" },
	{ name: "White", color: "#ffffff" },
	{ name: "Blue", color: "#2271b1" },
	{ name: "Red", color: "#d63638" },
	{ name: "Green", color: "#00a32a" },
	{ name: "Orange", color: "#dba617" },
	{ name: "Gray", color: "#8c8f94" },
];

export default function MetaSettingsModal( {
											   isOpen,
											   onClose,
											   loading,
											   saving,
											   editorUrl,
											   onOpenEditorInNewTab,
											   controlData,
											   setControlValue,
											   onSave,
										   } ) {
	if ( ! isOpen ) return null;

	const badgeType = String( controlData?.menu_badge_type?.value || "text" );

	const isMegaEnabled =
		String( controlData?.enabled?.value ) === "true" || controlData?.enabled?.value === true;

	const customMegaMenuWidthValue = normalizeCustomMegaMenuWidthValue(
		controlData?.custom_mega_menu_width?.value
	);
	const customMegaMenuWidthControlValue = customMegaMenuWidthValue === "" ? 0 : customMegaMenuWidthValue;

	return (
		<Modal title="Item settings" onRequestClose={ onClose } className="jet-nav-modal jm-settings-modal">
			{ loading ? <Spinner /> : null }

			{ ! loading && controlData === null ? (
				<Notice status="warning" isDismissible={ false }>
					Failed to load item settings.
				</Notice>
			) : null }

			{ ! loading && controlData ? (
				<Panel header="">
					<PanelBody title="Mega Content" initialOpen>
						<ToggleControl
							label="Use Mega content"
							checked={ isMegaEnabled }
							onChange={ ( v ) => setControlValue( "enabled", v ? "true" : "false" ) }
						/>

						{ isMegaEnabled && (
							<>
								<SelectControl
									label="Mega content type"
									value={ controlData.content_type?.value || "" }
									options={ controlData.content_type?.options || [] }
									onChange={ ( v ) => setControlValue( "content_type", v ) }
									__next40pxDefaultSize
									__nextHasNoMarginBottom
								/>

								{ editorUrl ? (
									<div style={ { display: "flex", gap: 8, marginTop: 8 } }>
										<Button variant="secondary" onClick={ onOpenEditorInNewTab }>
											Open editor
										</Button>
									</div>
								) : null }

								<SelectControl
									label="Mega content position"
									value={ controlData.custom_mega_menu_position?.value || "" }
									options={ controlData.custom_mega_menu_position?.options || [] }
									onChange={ ( v ) => setControlValue( "custom_mega_menu_position", v ) }
									__next40pxDefaultSize
									__nextHasNoMarginBottom
								/>

								<RangeControl
									label="Custom mega content width (px)"
									value={ customMegaMenuWidthControlValue }
									onChange={ ( v ) => {
										setControlValue( "custom_mega_menu_width", normalizeCustomMegaMenuWidthValue( v ) );
									} }
									min={ 0 }
									max={ 2000 }
									step={ 50 }
								/>

								<div
									className="components-circular-option-picker__custom-clear-wrapper"
									style={ { display: "flex", justifyContent: "flex-end", marginTop: 12 } }
								>
									<Button
										className="components-circular-option-picker__clear"
										variant="tertiary"
										onClick={ () => setControlValue( "custom_mega_menu_width", "" ) }
										disabled={ customMegaMenuWidthValue === "" }
										__next40pxDefaultSize
									>
										Clear
									</Button>
								</div>
							</>
						) }
					</PanelBody>

					<PanelBody title="Item Icon" initialOpen={ false }>
						<div className="jm-field">
							<div className="jm-field__label">SVG Icon</div>
							<SvgMediaControl
								value={ controlData.menu_svg?.value || "" }
								onChange={ ( v ) => setControlValue( "menu_svg", v ) }
							/>
						</div>

						<div style={ { marginTop: 8 } }>
							<div style={ { marginBottom: 6, fontWeight: 600 } }>Icon color</div>
							<ColorPalette
								colors={ COLORS }
								value={ controlData.icon_color?.value || "" }
								onChange={ ( v ) => setControlValue( "icon_color", v || "" ) }
							/>
						</div>

						<RangeControl
							label="Icon size (px)"
							value={ Number( controlData.icon_size?.value || 16 ) }
							onChange={ ( v ) => setControlValue( "icon_size", v ) }
							min={ 8 }
							max={ 300 }
							step={ 1 }
						/>
					</PanelBody>

					<PanelBody title="Item Badge" initialOpen={ false }>
						<SelectControl
							label="Type"
							value={ controlData.menu_badge_type?.value || "text" }
							options={ controlData.menu_badge_type?.options || [] }
							onChange={ ( v ) => setControlValue( "menu_badge_type", v ) }
							__next40pxDefaultSize
							__nextHasNoMarginBottom
						/>

						{ badgeType === "text" ? (
							<>
								<TextControl
									label="Item badge"
									value={ controlData.menu_badge?.value || "" }
									onChange={ ( v ) => setControlValue( "menu_badge", v ) }
									__next40pxDefaultSize
									__nextHasNoMarginBottom
								/>

								<div style={ { marginTop: 8 } }>
									<div style={ { marginBottom: 6, fontWeight: 600 } }>Badge color</div>
									<ColorPalette
										colors={ COLORS }
										value={ controlData.badge_color?.value || "" }
										onChange={ ( v ) => setControlValue( "badge_color", v || "" ) }
									/>
								</div>
							</>
						) : (
							<>
								<div className="jm-field">
									<div className="jm-field__label">Badge SVG</div>
									<SvgMediaControl
										value={ controlData.badge_svg?.value || "" }
										onChange={ ( v ) => setControlValue( "badge_svg", v ) }
									/>
								</div>

								<RangeControl
									label="Badge size (px)"
									value={ Number( controlData.badge_svg_size?.value || 12 ) }
									onChange={ ( v ) => setControlValue( "badge_svg_size", v ) }
									min={ 8 }
									max={ 300 }
									step={ 1 }
								/>
							</>
						) }

						<div style={ { marginTop: 8 } }>
							<div style={ { marginBottom: 6, fontWeight: 600 } }>Badge background</div>
							<ColorPalette
								colors={ COLORS }
								value={ controlData.badge_bg_color?.value || "" }
								onChange={ ( v ) => setControlValue( "badge_bg_color", v || "" ) }
							/>
						</div>

						<RangeControl
							label="Badge offset X (px)"
							value={ Number( controlData.badge_offset_x?.value || 0 ) }
							onChange={ ( v ) => setControlValue( "badge_offset_x", v ) }
							min={ -300 }
							max={ 300 }
							step={ 1 }
						/>

						<RangeControl
							label="Badge offset Y (px)"
							value={ Number( controlData.badge_offset_y?.value || 0 ) }
							onChange={ ( v ) => setControlValue( "badge_offset_y", v ) }
							min={ -300 }
							max={ 300 }
							step={ 1 }
						/>
					</PanelBody>

					<PanelBody title="Advanced" initialOpen={ false }>
						<ToggleControl
							label="Hide item navigation label"
							checked={
								String( controlData.hide_item_text?.value ) === "true" ||
								controlData.hide_item_text?.value === true
							}
							onChange={ ( v ) => setControlValue( "hide_item_text", v ? "true" : "false" ) }
						/>

						<div style={ { marginTop: 16 } }>
							<BoxControl
								label="Item custom padding (px)"
								values={ controlData.item_padding?.value || {} }
								units={ [ "px" ] }
								onChange={ ( nextValue ) => {
									const normalizedValue = {
										...( nextValue || {} ),
										units: "px",
									};

									setControlValue( "item_padding", normalizedValue );
								} }
							/>
						</div>
					</PanelBody>

					<DynamicVisibilityControl
						value={ controlData.dynamic_visibility?.value || {} }
						rolesOptions={ rolesOptions }
						onChange={ ( nextValue ) => {
							setControlValue( "dynamic_visibility", nextValue );
						} }
					/>
				</Panel>
			) : null }

			<div style={ { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 } }>
				<Button
					variant="primary"
					onClick={ onSave }
					isBusy={ saving }
					disabled={ saving || loading || ! controlData }
				>
					Save
				</Button>

				<Button variant="secondary" onClick={ onClose } disabled={ saving }>
					Close
				</Button>
			</div>
		</Modal>
	);
}
