import React from "react"
import {useState,useEffect, useRef} from 'react';
import { useForm, SubmitHandler } from "react-hook-form"
import './controls.css'



function EntityControl(props)
{    
   


    const [Entity, setEntity] = useState('');

    const [Course, setCourse] = useState('');
    const [CourseInControl, setCourseInControl] = useState(false);
    const [Speed, setSpeed] = useState();
    
    const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0]});
   
    
      
    useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  

        // console.log(props.Entity);
        setEntity(props.Entity);
        if(CourseInControl === false)
        {
            // setSpeed(props.Entity.Speed);
            
            if(props.Entity  !== undefined)
            {
            
                setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
            }else{
                setFormData({name:"",course:"",speed:"",position:['','']})

            }
            // setFormData({speed:props.Entity.Speed})


        }

      
        
    },[props.Entity,props]);



    // Entity.Entity.Course
const handleClick = (e) => {
        if(e.detail === 2)
        {   
            setCourseInControl(true);
            e.target.readOnly = false;
            // e.target.style = "border: 1px solid"
        }
    };  

    const handleCourseInput= (e) => {
        console.log(e.target)
        console.log(isNaN(e.nativeEvent?.data))
        if(!isNaN(e.nativeEvent?.data))
        {
            
            setFormData({...formData,course:e.currentTarget.value});
        }        
        };

        const handleSpeedInput= (e) => {
            console.log(e.target)
            if(!isNaN(e.nativeEvent?.data))
            {
                setFormData({...formData,speed:e.currentTarget.value});

            }
        };

        const emptyForm= (e) =>
        {

            setFormData({name:'',course:'',speed:'',position:['','']})
            setEntity('')

        }

        // const handleChange = (event) => {
        //     const { name, value } = event.target;
        //     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
        //   };

        const handleSubmit = (e) => {
            e.preventDefault();
            console.log(e.target.data);
            console.log(formData)
            // alert(`Course: ${formData.course}`);
                }
    // console.log(Entity)
    // console.log(EntityOnFocus)
    return (

    <div>
    <div><button onClick={ emptyForm}> New</button>    </div>

    <form onSubmit={handleSubmit}>
        <div className="ControlsComponent">
                <div class="parent">
                    <div class="div1">
                        <div class="NameInput">
                            <input className="EntityinputField NameInput" name="Name" readOnly={false} type="text" maxLength={3}  onClick={handleClick} onChange={handleCourseInput}  value={formData.name}   />
                        </div>
                    </div>
                    <div class="div2"> 
                        <div className="ControlHeader">Course:</div>
                        <div className="ControlValues" > <input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3}  onClick={handleClick} onChange={handleCourseInput}  value={formData.course}   /></div>
                    </div>
                    <div class="div3"> 
                        <div className="ControlHeader">Speed:</div>
                        <div id="Speed" className="ControlValues"><input className="EntityinputField" name="Speed" readOnly={true} type="text"  onClick={handleClick} onChange={handleSpeedInput}    value={formData.speed} /></div>
                    </div>
                    <div class="div5"> 
                        <div  className="flex">
                        <div className="ControlHeader">Lat:</div><input className="ControlInput" name="Lat" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[0]} />
                        </div>
                    </div>
                    <div class="div6">
                        <div  className="flex">

                        <div className="ControlHeader">Lon:</div><input className="ControlInput" name="Lon" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[1]}/>
                            </div>
                        </div>

                </div>
        <div> <button type='submit'>Save</button> <button>Delete</button></div>
        </div>
    </form>
    </div>
    );
}

export default EntityControl;