import React from "react";

import { IDataPack, IStructuredData } from "@ax/types";
import { SubNav } from "@ax/components";
import NavItem from "./NavItem";

const CategoryNav = (props: IProps): JSX.Element => {
	const { current, categories, onClick, dataPacks } = props;

	return (
		<SubNav>
			{dataPacks &&
				dataPacks.reduce((result: JSX.Element[], dataPack: IDataPack) => {
					const dataPackCategories = categories.filter((cat: IStructuredData) => cat.dataPacks.includes(dataPack.id));
					const hasCategories = dataPackCategories.length > 0;
					if (hasCategories) {
						const isFirst = result.length === 0;
						result.push(
							<NavItem
								key={dataPack.title}
								isFirst={isFirst}
								dataPack={dataPack}
								categories={dataPackCategories}
								current={current}
								onClick={onClick}
							/>,
						);
					}
					return result;
				}, [])}
		</SubNav>
	);
};

interface IProps {
	current: IStructuredData | null;
	categories: IStructuredData[];
	onClick(id: string): void;
	dataPacks: IDataPack[];
}

export default CategoryNav;
