// ========== JS: アイコン挿入ロジック ==========

// IconData を引数として受け取るIIFE（即時実行関数）
(function (IconData) {
	// 必要な依存関係をインポート
	const { createElement } = wp.element;
	const { registerFormatType, insert, create } = wp.richText;
	const { BlockFormatControls } = wp.blockEditor;
	const { Toolbar, DropdownMenu } = wp.components;
	const el = createElement;
    
	// ----------------------------------------------------------------------
	// 1. PHPから受け取ったデータを IconData から取得し、定数に格納
	// ----------------------------------------------------------------------
	const IconGroup1Title = IconData.group1_text;
	const IconGroup2Title = IconData.group2_text;
	const IconGroup3Title = IconData.group3_text;
	const IconGroup4Title = IconData.group4_text;
	const IconGroup5Title = IconData.group5_text;
	const IconGroup6Title = IconData.group6_text;
	const SimpleIconList = IconData.iconList; // PHPから渡されたシンプルデータ

	const COMMON_ICON_CLASS = ' haup-block-toolbar-icons';
	const ZERO_WIDTH_SPACE = '\u200b';

	// ----------------------------------------------------------------------
	// 2. アイコンデータを整形・カテゴリー分けするコールバック関数
	// ----------------------------------------------------------------------
	const processIconData = (simpleList) => {
		const processedData = {};
		let allIconTypes = [];

		// カテゴリーごとにループ
		for (const category in simpleList) {
			if (Object.prototype.hasOwnProperty.call(simpleList, category)) {
				const classNames = simpleList[category];
                
				// アイコンクラス名ごとにループし、完全なオブジェクトを生成
				const categoryIcons = classNames.map(className => {
					const name = className;
					const title = name; 
					const fullClassName = `${className}${COMMON_ICON_CLASS}`;

					return {
						name: name,
						title: title, 
						category: category,
						element: el('span', { className: fullClassName }), 
						insertHtml: `<span class="${className}">${ZERO_WIDTH_SPACE}</span>`,
					};
				});
                
				processedData[category] = categoryIcons;
				allIconTypes = allIconTypes.concat(categoryIcons); // 全アイコンを統合
			}
		}
        
		return { processedData, allIconTypes };
	};

	const { processedData, allIconTypes } = processIconData(SimpleIconList);

	// ----------------------------------------------------------------------
	// 3. カテゴリーごとのアイコン配列を抽出
	// ----------------------------------------------------------------------
	const Group1ButtonIcons = processedData.group1 || [];
	const Group2ButtonIcons = processedData.group2 || [];
	const Group3ButtonIcons = processedData.group3 || [];
	const Group4ButtonIcons = processedData.group4 || [];
	const Group5ButtonIcons = processedData.group5 || [];
	const Group6ButtonIcons = processedData.group6 || [];

   
	// アイコン定義から DropdownMenu に渡す controls オブジェクトを生成するヘルパー関数
	const createControls = (icons, value, onChange) => {
		return icons.map(icon => {
			const contentToInsert = create({ html: icon.insertHtml });
			const clickHandler = () => onChange(
				insert(value, contentToInsert, value.start, value.end)
			);
			return {
				// ドロップダウンメニュー内のテキストを非表示にする
				title: '', 
				icon: icon.element,
			    onClick: clickHandler,
			};
		});
	};

	// ----------------------------------------------------------------------
	// 4. 個々のアイコン登録 (フォーマットとしての登録)
	// ----------------------------------------------------------------------
	allIconTypes.forEach((iconType) => {
		const typeName = `haup/richtext-insert-${iconType.name}`;

		registerFormatType(typeName, {
			title: iconType.title,
			tagName: `haupiconinsert-${iconType.name}`,
			className: null,
            
			// ツールバーに直接ボタンを表示しないため、edit関数は空のFragmentを返す
			edit: () => el(wp.element.Fragment, {}), 
		});
	});


	// ----------------------------------------------------------------------
	// 5. 親ドロップダウンの登録
	// ----------------------------------------------------------------------
	registerFormatType('haup/icon-dropdown-group', {
		title: 'icon group',
		tagName: 'dropdown-group',
		className: null,

		edit({ value, onChange }) {
			// カテゴリごとのコントロールを生成
			const Group1ButtonControls = createControls(Group1ButtonIcons, value, onChange);
			const Group2ButtonControls = createControls(Group2ButtonIcons, value, onChange);
			const Group3ButtonControls = createControls(Group3ButtonIcons, value, onChange);
			const Group4ButtonControls = createControls(Group4ButtonIcons, value, onChange);
			const Group5ButtonControls = createControls(Group5ButtonIcons, value, onChange);
			const Group6ButtonControls = createControls(Group6ButtonIcons, value, onChange);
            
			// 1つめのドロップダウンボタン要素
			const Group1Dropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'icon-hauicon-bookfile01' }), // グループ1の代表アイコン
					label: IconGroup1Title,
					controls: Group1ButtonControls,
					popoverProps: { className: 'haup-custom-icon-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);
            
			// 2つめのドロップダウンボタン要素
			const Group2Dropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'icon-hauicon-dog-08' }), // グループ2の代表アイコン
					label: IconGroup2Title,
					controls: Group2ButtonControls,
					popoverProps: { className: 'haup-custom-icon-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);

			// 3つめのドロップダウンボタン要素
			const Group3Dropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'icon-hauicon-weather01' }), // グループ3の代表アイコン
					label: IconGroup3Title,
					controls: Group3ButtonControls,
					popoverProps: { className: 'haup-custom-icon-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);

			// 4つめのドロップダウンボタン要素
			const Group4Dropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'icon-hauicon-shop32' }), // グループ4の代表アイコン
					label: IconGroup4Title,
					controls: Group4ButtonControls,
					popoverProps: { className: 'haup-custom-icon-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
 			);

			// 5つめのドロップダウンボタン要素
			const Group5Dropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'icon-hauicon-person01' }), // グループ5の代表アイコン
					label: IconGroup5Title,
					controls: Group5ButtonControls,
					popoverProps: { className: 'haup-custom-icon-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);

			// 6つめのドロップダウンボタン要素
			const Group6Dropdown = el(DropdownMenu,
				{
					icon: el('span', { className: 'icon-hauicon-music07' }), // グループ6の代表アイコン
					label: IconGroup6Title,
					controls: Group6ButtonControls,
					popoverProps: { className: 'haup-custom-icon-panel-small' },
					position: 'bottom left',
					showLabel: false,
				}
			);

			return (
				el(BlockFormatControls,
					{},
					el('div',
						{ className: 'components-toolbar is-compact' }, 
						el(Toolbar,
							{ className: 'haup-icon-group' }, 
							Group1Dropdown,
							Group2Dropdown,
							Group3Dropdown,
							Group4Dropdown,
							Group5Dropdown,
							Group6Dropdown
						)
					)
				)
			);
		}
	});

// IIFEの実行。グローバルスコープにある IconData を引数として渡す。
})(IconData);