import { useState } from "react";

import { VerticalTabGroupItem } from "../model/VerticalTabGroupItem";

import styles from "./VerticalTabGroup.module.css";

export interface TabListProps {
	tabs: VerticalTabGroupItem;
}

export function VerticalTabGroup(props: TabListProps) {
	console.assert(
		props.tabs.groups.length !== 0,
		"tabs must be have almost one element",
	);
	const [currentTab, setCurrentTab] = useState(
		props.tabs.groups[0].items[0].key,
	);

	function getCurrentContent() {
		for (const group of props.tabs.groups) {
			for (const item of group.items) {
				if (item.key === currentTab) {
					return item.content;
				}
			}
		}

		return null;
	}

	return (
		<div className={styles.container}>
			<div className={styles.tabGroupContainer}>
				<div className={styles.tabGroupContainerInner}>
					{props.tabs.groups.map((group) => (
						<div key={group.key} className={styles.tabGroup}>
							{group.items.map((item) => (
								<div
									key={item.key}
									className={`${styles.tabItem} ${
										currentTab === item.key
											? styles.activeItemTab
											: ""
									}`}
									onClick={() => setCurrentTab(item.key)}
								>
									{item.label}
								</div>
							))}
						</div>
					))}
				</div>
			</div>

			<div className={styles.contentContainer}>
				<div className={styles.contentInner}>{getCurrentContent()}</div>
			</div>
		</div>
	);
}
