import React, {FC, FormEvent, ReactEventHandler, useState} from "react"
import Field from "../Field";
import {timeTracker} from "../../utilities/types";

const TimeTrackerEdit: FC<TimeTrackerEditProps> = ({timeTracker}) => {

    const [trackerForm, setTrackerForm] = useState<timeTracker>(timeTracker)

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(trackerForm, event.target.value)
        setTrackerForm({...trackerForm, [event.target.name]: event.target.value.replace('T', ' ')})
    }

    const onSubmit = (event: FormEvent) => {
        event.preventDefault()

        console.log(trackerForm)
    }

    return <form onSubmit={onSubmit}>
        <Field name="start_at"
               type="datetime-local"
               value={trackerForm.start_at}
               onChange={handleChange}/>
        <Field name="end_at"
               type="datetime-local"
               value={trackerForm.end_at}
               onChange={handleChange}/>

        <button type="submit">Valider</button>
    </form>
}

export default TimeTrackerEdit

interface TimeTrackerEditProps {
    timeTracker: timeTracker,
}