"use client";

import { useEffect, useState } from "react";
import Modal from "../ui/Modal";
import { InputNumber } from "../ui/InputNumber";
import { api_ProconVisualisierungen_Update } from "@/actions/procon/api-procon-visualisierungen";
import { ProConView } from "@/types/procon";

interface Positionen{
	posX:number,
	posY:number,
	height:number,
	width:number,
	zIndex:number
}

interface Props {
	id:number,
	koordinaten: Positionen
}


export default function VisualisierungPositionen({ id,koordinaten }: Props) {
	const [showDetails, setShowDetails] = useState(false);
	const [text, setText] = useState('');

	const handleChange = (name:string,value:number)=>{
		console.log('Submit','name',name,' value',value);
		let data :Partial<ProConView> = {}
		if(name==='posX') data['posX'] = value;
		if(name==='posY') data['posY'] = value;
		if(name==='height') data['height'] = value;
		if(name==='width') data['width'] = value;
		if(name==='zIndex') data['zIndex'] = value;
		

		api_ProconVisualisierungen_Update(id,data);
	}

	return (
		<>
		
				<InputNumber name="posX" inValue={koordinaten.posX} onChanged={handleChange} />
				<InputNumber name="posY" inValue={koordinaten.posY} onChanged={handleChange} />
				<InputNumber name="height" inValue={koordinaten.height} onChanged={handleChange} />
				<InputNumber name="width" inValue={koordinaten.width} onChanged={handleChange} />
				<InputNumber name="zIndex" inValue={koordinaten.zIndex} onChanged={handleChange} />
		
		</>
	);
}

/*
<div>{element.posX}</div>
								<div>{element.posY}</div>
								<div>{element.height}</div>
								<div>{element.width}</div>
								<div>{element.zIndex}</div>
								*/