"use client"

import { Group, Peripherie, PeripherieFilterOptionen } from "@/types/rk";
import { useEffect, useState } from "react";
import PeripherieListView from "../peripherie/peripherieListView";
import { PeripherieFindApi } from "@/actions/rk/api-peripherie";
import { api_GroupAll, api_groupDelete } from "@/actions/rk/api-groups";



interface Props {
	group: Group
}

export default function GroupViewItem({ group }: Props) {

	const [showEA_Group, setShowEA_Group] = useState(false);
	const [showEA_Element, setShowEA_Element] = useState(false);
	const [showEA_Diff, setShowEA_Diff] = useState(false);
	const [peripheries, setPeripheries] = useState<Peripherie[]>([]);

	useEffect(() => {
		setPeripheries([]);
		setShowEA_Group(false);
		setShowEA_Element(false);
		setShowEA_Diff(false);

	}, [group])

	const handlerShow_Group = () => {
		const newMode = !showEA_Group;
		setShowEA_Group(newMode)
		if (newMode) {
			let filter: PeripherieFilterOptionen = {
				groupId: group.id
			}
			PeripherieFindApi(filter).then(setPeripheries);

		} else {
			setPeripheries([])
		};

	};
	const handlerShow_Element = () => {
		setShowEA_Element((pre) => !pre)
		//if (filterElementId) filter['elementId'] = filterElementId;
		if (showEA_Group) {
			let filter: PeripherieFilterOptionen = {
				//				elementId: group..id
			};

			//			PeripherieFindApi(filter).then(setPeripheries);

		}

	};
	const handlerShow_Diff = () => {
		setShowEA_Diff((pre) => !pre)

	};

	const handlerDelete = () => {
		if(group.id) api_groupDelete(group.id);

	};


	return (
		<div className="ms-2">
			<div className="flex gap-2 text-lg font-semibold bg-gray-200 ps-2">
				<div>Gruppe :</div>
				<div>{group.nr}</div>
				<div>{group.name}</div>
			</div>

			<div className="flex flex-col gap-2">
				<div>Anzeige Name :{group.displayName}</div>
				<div>Info: {group.info}</div>
				<div>Ort: {group.ort}</div>
				<div>Type {group.type}</div>
			</div>

			<div className="mt-2 ps-2">
				<div className="text-lg font-semibold">Eigenschaften</div>
				{group.options &&
					Object.entries(group.options).map(([key, value]) => (
						<div key={key} className="grid grid-cols-2 gap-8">
							<div >{key}</div>
							<div>
								{typeof value === "boolean" ? (value ? "Ja" : "Nein") : value}
							</div>
						</div>
					))}
			</div>

			<div className="mt-2 ps-2">
				<div className="text-lg font-semibold">Elemente</div>

				{group.elements && <div>
					{group.elements.map((element) => (
						<div key={element.id} className="grid grid-cols-2 gap-8">
							{false && element.prefix &&
								<div> {element.prefix}</div>
							}
							<div>{element.name}</div>
							<div>{element.excelNr}</div>

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

			<div className="mt-8">
				<button className="bg-gray-300 rounded-xl p-2 hover:bg-gray-500 me-2" onClick={() => handlerShow_Group()}>Show EA Group</button>
				<button className="bg-gray-300 rounded-xl p-2 hover:bg-gray-500 me-2" onClick={() => handlerShow_Element()}>Show EA Elements</button>
				<button className="bg-red-300 rounded-xl p-2 hover:bg-gray-500 me-2" onClick={() => handlerDelete()}>Löschen</button>
				
				<button className="bg-gray-300 rounded-xl p-2 hover:bg-gray-500 me-2">Show EA Diffrences to Excel</button>
			</div>
			{showEA_Group && <div>
				Ein-Ausgänge
			</div>}
			{showEA_Group && <div className="border-1">
				
			</div>}


		</div>
	)
}