import {Button, TextField} from "@vaadin/react-components";
import {useEffect} from "react";
import {useNavigate, useParams} from "react-router-dom";
import {useForm} from "@vaadin/hilla-react-form";
import {CustomerService} from "Frontend/generated/endpoints";
import CustomerModel from "Frontend/generated/org/javacodegeeks/hilla/CustomerModel";

export default function CustomerEditor() {
  const {id} = useParams();
  const navigate = useNavigate();

  const {field, model, submit, read} = useForm(CustomerModel, {
    onSubmit: async contact => {
      await CustomerService.save(contact);
      navigate('/');
    }
  })

  async function loadUser(id: number) {
    read(await CustomerService.findById(id))
  }

  useEffect(() => {
    if (id) {
      loadUser(parseInt(id))
    }
  }, [id]);


  return (
    <div className="flex flex-col items-start gap-m">
      <TextField label="Name" {...field(model.name)}/>
      <TextField label="Email" {...field(model.email)}/>
      <TextField label="Phone" {...field(model.mobile)}/>
      <div className="flex gap-s">
        <Button onClick={submit} theme="primary">Save</Button>
        <Button onClick={() => navigate('/')} theme="tertiary">Cancel</Button>
      </div>
    </div>
  );
}
