import React from "react";

import { CategoryCell } from "@ax/components";
import { Cell } from "@ax/components/TableList/TableItem/style";
import type { ISchemaField } from "@ax/types";

import styled from "styled-components";

const ColumnCell = styled(Cell)`
	flex: 0 0 215px;
	position: relative;
	align-items: center;
`;

const buildCategoryColumns = (
	categoryColumns: ISchemaField[],
	activeColumns: string[],
	contentData: Record<string, any> | undefined,
	categoryColors: any,
	addCategoryColors: (cats: string[]) => void,
	onClick: () => void,
) => {
	return categoryColumns.map((col) => {
		if (!activeColumns.includes(col.key)) {
			return <React.Fragment key={col.key} />;
		}

		const type: any = contentData?.[col.key];

		if (typeof type !== "object") {
			return (
				<ColumnCell key={col.key} onClick={onClick}>
					{type}
				</ColumnCell>
			);
		}

		const categories: string[] = !type
			? []
			: Array.isArray(type)
				? type.map((cat: any) => cat.label || cat.title)
				: [type.label || type.title];

		return (
			<CategoryCell
				key={col.key}
				categories={categories}
				categoryColors={categoryColors}
				addCategoryColors={addCategoryColors}
			/>
		);
	});
};

export { buildCategoryColumns, ColumnCell };
