"use client"

import { Group } from "@/types/rk";
import GroupSelect from "./groupSelect";
import { useEffect, useState } from "react";
import GroupViewItem from "./group_ViewItem";
import GroupFilter from "./group_Filter";
import { GroupEdit } from "./group_Edit";


interface Props {
	groups: Group[],
}

export default function GroupView({ groups }: Props) {

	const [selectedItem, setSelectedItem] = useState<Group | undefined>();
	const [groupFilterd, setGroupFilterd] = useState<Group[]>([]);

	useEffect(() => {
		setGroupFilterd([...groups]);
		if(selectedItem){
			const updatedGroup = groups.find((g)=>g.id==selectedItem.id);
			if(updatedGroup) setSelectedItem(()=>updatedGroup);

		}
	}, [groups])

	const handlerOnChangeFilter = (groups: Group[]) => {
		setGroupFilterd([...groups]);
	}

	const handleSelect = (item: Group) => {
		console.log(item);
		setSelectedItem(item);
	}


	return (
		<div>
			<div className="m-4 p-4 border-1 border-gray-100 w-256">
				<GroupFilter groups={groups} onChange={handlerOnChangeFilter}></GroupFilter>

			</div>
			<div className="m-4  grid grid-cols-[300_2fr]">
				{/** Spalte 1 Auswahl Gruppe */}
				<div>
					<GroupSelect onSelect={handleSelect} groups={groupFilterd}></GroupSelect>
				</div>

				{/** Spalte 2 Anzeige Gruppe details */}
				<div className="flex flex-col w-256 h-10">
					{selectedItem && <div >
						<div>edit</div>
						<GroupViewItem group={selectedItem} ></GroupViewItem>
						{<GroupEdit debug={true} initData={selectedItem} ></GroupEdit>}
					</div>}
				</div>
			</div>

		</div>
	)
}