import { __ } from '@wordpress/i18n';
import { useState, useEffect, useCallback, useMemo } from 'react';
import {
	Flex,
	FlexBlock,
} from '@wordpress/components';



export type Tab = {
	label: string,
	controls: string[],
}

type Props = {
	tabs: { [key in string]: Tab },
	description?: string,
}

/**
 * コントロール要素をIDから取得する
 * xxxx[yyyy] 形式のIDは xxxx-yyyy に変換して検索する
 */
const getControlElementById = (controlId: string): HTMLElement | null => {
	const escapedControlId = controlId.replace(/\[/g, '-').replace(/\]/g, '');
	return document.querySelector(`[id^="customize-control-${escapedControlId}"]`) as HTMLElement | null;
};

export default function ApuraTabs({ tabs, description }: Props) {

	const keys = useMemo(() => Object.keys(tabs), [tabs]);
	// 最初のタブをアクティブにする
	const [activeTab, setActiveTab] = useState<string>(keys[0]);

	const onChangeTab = useCallback((tabKey: string) => {
		setActiveTab(tabKey);
		// アクティブなタブのコントロールを表示する
		tabs[tabKey].controls.forEach(controlId => {
			const controlElement = getControlElementById(controlId);
			if (controlElement) {
				controlElement.style.display = 'block';
			} else {
				console.warn(`Control element not found for ID: ${controlId}`);
			}
		});
		// 他のタブのコントロールを非表示にする
		Object.keys(tabs).forEach(key => {
			if (key === tabKey) {
				return;
			}
			tabs[key].controls.forEach(controlId => {
				const controlElement = getControlElementById(controlId);
				if (controlElement) {
					controlElement.style.display = 'none';
				} else {
					console.warn(`Control element not found for ID: ${controlId}`);
				}
			});
		});
	}, [tabs]);

	// 初回レンダリング時に最初のタブをアクティブにする
	useEffect(() => {
		onChangeTab(keys[0]);
	}, [onChangeTab, keys]);


	return (
		<div className="apura-tabs">
			<Flex
				gap={0}
				className="apura-tabs__tabs"
				role="tablist"
			>
				{keys.map((key) => (
					<FlexBlock key={key}>
						<button
							type="button"
							role="tab"
							onClick={() => onChangeTab(key)}
							aria-selected={activeTab === key}
							className={`apura-tabs__tab ${activeTab === key ? 'is-active' : ''}`}
						>
							{tabs[key].label}
						</button>
					</FlexBlock>
				))}
			</Flex>
			{description && (
				<div className="customize-control-description">
					{description}
				</div>
			)}
		</div>
	);
}