// WordPress Customizer API型定義
declare global {
	interface WpCustomize {
		// 関数として呼び出す場合のシグネチャ（設定値へのアクセス）
		(settingId: string, callback: (setting: any) => void): void;
		(settingId: string): any;
		section: (sectionId: string) => CustomizerSection;
		control: (controlId: string) => any;
		settings: {
			controls: { [key: string]: Control };
		};
		state: (stateId: string) => any;
		bind: (event: string, callback: () => void) => void;
		previewedDevice: {
			get: () => string;
			set: (device: string) => void;
			bind: (callback: (device: string) => void) => void;
			unbind: (callback: (device: string) => void) => void;
		};
	}

	interface WpMediaFrame {
		on: (event: string, callback: () => void) => void;
		off: (event: string, callback: () => void) => void;
		open: () => void;
		close: () => void;
		state: () => {
			get: (key: string) => {
				first: () => {
					toJSON: () => Record<string, any>;
				};
			};
		};
	}

	interface WpMediaOptions {
		title?: string;
		button?: { text?: string };
		multiple?: boolean;
		library?: { type?: string | string[] };
	}

	interface WpMedia {
		(options: WpMediaOptions): WpMediaFrame;
	}

	interface Window {
		wp: {
			customize: WpCustomize;
			media: WpMedia;
		};
	}

	const wp: Window['wp'];

	// Customizer Section型定義
	interface CustomizerSection {
		expanded: {
			(value?: boolean): boolean | void;
			bind: (namespace: string, callback: (isExpanded: boolean) => void) => void;
			unbind: (namespace: string) => void;
		};
		active: {
			get: () => boolean;
			set: (value: boolean) => void;
			validate: () => boolean;
		};
		container: JQuery;
		contentContainer: JQuery;
		focus: () => void;
		activate: (options?: { duration?: number }) => void;
		deactivate: (options?: { duration?: number }) => void;
	}

	type SortableItem = {
		id: string;
		label: string;
		value: string;
		subControls?: any;
		isActive?: boolean; // 任意にすることで利用側で省略可能に
		isLocked?: boolean; // ソート不可にするためのフラグ
		[key: string]: any; // 将来の拡張にも対応
	};

	type SortItems = SortableItem[];

	type GoogleFontItem = {
		type: string;
		name: string;
		category: string;
		variants: string[];
		italic: 'full' | 'roman' | 'italic' | '';
		optical_size: string;
		width?: string;
	};

	type GoogleFontConfig = {
		type: string;
		name: string;
		category: string;
		variants: string[];
		italic: 'full' | 'roman' | 'italic' | '';
		optical_size: string;
		width: {
			range: string;
			default: string;
		};
	};

	const apuraCustomizerControl: {
		builtInPalette: paletteColor[];
		paletteOverrides: Array<{ slug: string; color: string }>;
		customPalette: paletteColor[];
		paletteOverridesId: string;
		customPaletteId: string;
		themeOptionField?: string | undefined;
		googleFontSettingsId: string;
		googleFonts: GoogleFontItem[];
		systemFonts: string[];
	};

	type device = 'desktop' | 'tablet' | 'mobile';
	type devices = { device: device; label: string }[];

	type paletteColor = {
		name: string;
		slug: string;
		color: string;
	};

	type RangeControlDeviceValue = {
		device: device;
		number: number | null | undefined;
		unit: string;
		min: number;
		max: number;
		step?: number;
	};

	type unitData = {
		value: string;
		label?: string;
		min?: number;
		max?: number;
		step?: number;
	};

	type unitOptions = { label: string; value: string }[];

	type handleUnitChange = {
		(unit: string, device: device): void;
	};

	interface CustomCSS extends React.CSSProperties {
		[key: `--${string}`]: string | number;
	}

	type Merge<T> = {
		[K in keyof T]: T[K];
	};

	interface SectionNavigationControl {
		type: string;
		selector: string;
		setting: {
			get: () => SectionNavigationConfig;
			set: (value: SectionNavigationConfig) => void;
		};
		params: {
			label: string;
			description?: string;
			navigationConfig: SectionNavigationConfig;
		};
	}

	interface SectionNavigationConfig {
		targetSection: string;
		buttonText: string;
		buttonType: 'goto' | 'back';
		icon?: string;
		description?: string;
	}
}

export {};