(function () {
	// 必要な依存関係をインポート
	const { Fragment, createElement } = wp.element;
	const { registerFormatType, toggleFormat } = wp.richText;
	const { BlockFormatControls } = wp.blockEditor;
	const { Toolbar, DropdownMenu } = wp.components;
	const { orderBy } = lodash;
 
	const el = createElement;

	// PHPから受け取った翻訳済みタイトルをスクリプト内で使える変数に変換（wp_localize_scriptの想定）
	//マーカー
	const TextDecorationTitleYmark = TextDecorationTitleVal.ymark_text;
	const TextDecorationTitleDYmark = TextDecorationTitleVal.dymark_text;
	const TextDecorationTitleBmark = TextDecorationTitleVal.bmark_text;
	const TextDecorationTitleDBmark = TextDecorationTitleVal.dbmark_text;
	const TextDecorationTitleRmark = TextDecorationTitleVal.rmark_text;
	const TextDecorationTitleDRmark = TextDecorationTitleVal.drmark_text;
	const TextDecorationTitleGmark = TextDecorationTitleVal.gmark_text;
	const TextDecorationTitleDGmark = TextDecorationTitleVal.dgmark_text;

	//アンダーライン
	const TextDecorationTitleYuline = TextDecorationTitleVal.yuline_text;
	const TextDecorationTitleDYuline = TextDecorationTitleVal.dyuline_text;
	const TextDecorationTitleBuline = TextDecorationTitleVal.buline_text;
	const TextDecorationTitleDBuline = TextDecorationTitleVal.dbuline_text;
	const TextDecorationTitleRuline = TextDecorationTitleVal.ruline_text;
	const TextDecorationTitleDRuline = TextDecorationTitleVal.druline_text;
	const TextDecorationTitleGuline = TextDecorationTitleVal.guline_text;
	const TextDecorationTitleDGuline = TextDecorationTitleVal.dguline_text;

	//文字拡大
	const TextDecorationTitleTwelve = TextDecorationTitleVal.twelve_text;
	const TextDecorationTitleFifteen = TextDecorationTitleVal.fifteen_text;
	const TextDecorationTitleTwenty = TextDecorationTitleVal.twenty_text;
	const TextDecorationTitleFourty = TextDecorationTitleVal.fourty_text;

	const TextDecorationButtonTitle = TextDecorationTitleVal.button_text; // ツールチップ用

	// サブメニュー親項目の翻訳済みタイトル
	const SubMenuTitleUnderline = TextDecorationTitleVal.submenu_underline || 'Under Line'; 
	const SubMenuTitleMarker = TextDecorationTitleVal.submenu_marker || 'Marker';
	const SubMenuTitleSize = TextDecorationTitleVal.submenu_size || 'Text Size';
    
	// --- ★ 1. 全ての装飾データを一元管理 ★ ---
	const allDecorationTypes = [];
	// マーカー
	allDecorationTypes.push({ tag: 'mark', class: 'style-ymark', title: TextDecorationTitleYmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-dymark', title: TextDecorationTitleDYmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-bmark', title: TextDecorationTitleBmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-dbmark', title: TextDecorationTitleDBmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-rmark', title: TextDecorationTitleRmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-drmark', title: TextDecorationTitleDRmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-gmark', title: TextDecorationTitleGmark, icon: 'edit', category: 'marker' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-dgmark', title: TextDecorationTitleDGmark, icon: 'edit', category: 'marker' });

	// アンダーライン
	allDecorationTypes.push({ tag: 'mark', class: 'style-yuline', title: TextDecorationTitleYuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-dyuline', title: TextDecorationTitleDYuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-buline', title: TextDecorationTitleBuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-dbuline', title: TextDecorationTitleDBuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-ruline', title: TextDecorationTitleRuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-druline', title: TextDecorationTitleDRuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-guline', title: TextDecorationTitleGuline,icon: 'edit', category: 'underline' });
	allDecorationTypes.push({ tag: 'mark', class: 'style-dguline', title: TextDecorationTitleDGuline,icon: 'edit', category: 'underline' });

	// 拡大文字
	allDecorationTypes.push({ tag: 'span', class: 'large-font-one-two', title: TextDecorationTitleTwelve, icon: 'edit', category: 'size' });
	allDecorationTypes.push({ tag: 'span', class: 'large-font-one-five', title: TextDecorationTitleFifteen, icon: 'edit', category: 'size' });
	allDecorationTypes.push({ tag: 'span', class: 'large-font-two', title: TextDecorationTitleTwenty, icon: 'edit', category: 'size' });
	allDecorationTypes.push({ tag: 'span', class: 'large-font-four', title: TextDecorationTitleFourty, icon: 'edit', category: 'size' });
    
	// カテゴリーごとに装飾を分離
	const MarkerDecorations = allDecorationTypes.filter(deco => deco.category === 'marker');
	const UnderlineDecorations = allDecorationTypes.filter(deco => deco.category === 'underline');
	const SizeDecorations = allDecorationTypes.filter(deco => deco.category === 'size');
    
	const createControls = (decorations, value, onChange) => {
		return decorations.map(deco => {
			let type = 'haup/richtext-' + deco.tag;
			if(deco.class !== null){
				type += '-' + deco.class;
			}
            
			const titleElement = el('span', { 
				className: 'haup-item-' + deco.class + ' components-dropdown-menu__item-title'
			}, deco.title);

			const clickHandler = () => onChange( toggleFormat(value, { type: type }) );
			const isActive = value.formats.some(f => f.type === type);

			return {
				title: titleElement, 
				icon: deco.icon,
				isActive: isActive,
				onClick: clickHandler,
				key: type
			};
		});
	};

	// ----------------------------------------------------------------------
	// 2. 親ドロップダウンの登録 (UIを表示する唯一のフォーマット)
	// ----------------------------------------------------------------------
	registerFormatType('haup/decoration-dropdown-group', { 
		title: 'decoration group',
		tagName: 'dropdown-group-deco',
		className: null,

		edit({ value, onChange }) {
			// カテゴリごとの最終コントロールを生成
			const MarkerControls = createControls(MarkerDecorations, value, onChange);
			const UnderlineControls = createControls(UnderlineDecorations, value, onChange);
			const SizeControls = createControls(SizeDecorations, value, onChange);
            
			// 1. マーカーのドロップダウンボタン要素
			const MarkerDropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'dashicons dashicons-edit' }), 
					label: SubMenuTitleMarker,
					controls: MarkerControls,
					popoverProps: { className: 'haup-custom-deco-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);
            
			// 2. アンダーラインのドロップダウンボタン要素
			const UnderlineDropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'dashicons dashicons-editor-underline' }),
					label: SubMenuTitleUnderline,
					controls: UnderlineControls,
					popoverProps: { className: 'haup-custom-deco-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);

			// 3. サイズのドロップダウンボタン要素
			const SizeDropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'dashicons dashicons-editor-expand' }),
					label: SubMenuTitleSize,
					controls: SizeControls,
					popoverProps: { className: 'haup-custom-deco-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);

			return (
				el(BlockFormatControls,
					{},
					el('div',
						{ className: 'components-toolbar is-compact' }, 
						el(Toolbar,
							{ className: 'haup-decoration-group' }, // ★ CSS制御の親要素
							// ★★★ JSでダミーのメインアイコンは配置しない（CSS::beforeで描画するため） ★★★
							MarkerDropdown,
							UnderlineDropdown,
							SizeDropdown
						)
					)
				)
			);
		}
	});

	// ----------------------------------------------------------------------
	// 3. 個々の装飾登録 (UI要素の提供はせず、フォーマット機能のみ提供)
	// ----------------------------------------------------------------------
	allDecorationTypes.forEach((decoType) => {
		let type = 'haup/richtext-' + decoType.tag;
		if(decoType.class !== null){
			type += '-' + decoType.class;
		}

		registerFormatType(type, {
			title: decoType.title,
			tagName: decoType.tag,
			className: decoType.class,
			edit: Fragment, 
		});
	});

})();