"use client"

import { Anlage, Element, ExcelProCon, Group } from "@/types/rk";
import { useEffect, useState } from "react";
import { ElementEdit } from "./elementEdit";
import ElementViewItem from "./elementsViewItem";
import ElementViewListHeader from "./elementsViewListHeader";
import ElementSelectExcelList from "./elementsSelectExcelList";
import { ElementEditRow } from "./elementEditRow";
import { useElements } from "@/hooks/useElements";


interface Props {
	analge:Anlage,
	elements: Element[],
	groups: Group[]
}

export default function ElementCreateView({ analge,elements:initElements, groups }: Props) {

	const { elements, selectedElement, filterExcelListe, setFilterExcelListe, setSelectedItem } = useElements({ elements: initElements });




return (
	<div className="grid grid-cols-[1200_300]">
		<div>

			<ElementSelectExcelList onSelect={(liste) => setFilterExcelListe(liste)}></ElementSelectExcelList>
			
			<ElementEditRow anlage={analge} groups={groups}></ElementEditRow>
			{filterExcelListe}
			
			<div className="m-4 p-4">
					<ElementViewListHeader></ElementViewListHeader>
				<div className="h-180 overflow-y-scroll border">
					{elements.map((item) =>

						<ElementViewItem key={item.id} element={item} onSelect={setSelectedItem}></ElementViewItem>

					)}
				</div>
			</div>
		</div>

	

	</div>
)
}