import React, {useEffect, useState} from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {apiGet, apiPost, apiPut} from "../api";

function CompanyForm() {
    const {id} = useParams(); // Get the company ID from the URL
    const navigate = useNavigate();

    const [form, setForm]=useState({name:"", website:"", notes:""});
    const [error,setError]=useState(null);
    const isEdit=Boolean(id);

    useEffect(() => {
        if(!isEdit) return;
        apiGet(`/api/companies/${id}`)
            .then(data => setForm({name:data.name || "", website:data.website || "", notes:data.notes|| ""}))
                .catch(error => setError(error.message));
    }, [id, isEdit]);

    async function onSubmit(e){
        e.preventDefault();
        setError(null);
        try {
            if(isEdit){
                await apiPut(`/api/companies/${id}`, form);
            } else {
                await apiPost('/api/companies', form);
            }
            navigate('/');
        } catch(err) {
            setError(err.message);
        }
    }
    return (
        <div className='container mt-4'>
            <h2>{isEdit ? "Edit Company" : "new Company"}</h2>
            {error && <div className="alert alert-danger">{error}</div>}
            <form onSubmit={onSubmit} className='mt-3'>
                <div className='mb-3'>
                    <label className='form-label'>Name:</label>
                    <input required value={form.name} onChange={e => setForm({...form, name:e.target.value})} className='form-control' />                    
                </div>
                <div className='mb-3'>
                    <label className='form-label'>Website:<br />
                        <input value={form.website} onChange={e => setForm({...form, website:e.target.value})} />
                    </label>
                </div>
                <div className='mb-3'>
                    <label className='form-label'>Notes:<br />
                        <textarea value={form.notes} onChange={e => setForm({...form, notes:e.target.value})} />
                    </label>
                </div>
                <div className='d-flex gap-2'>
                    <button type="submit" className='btn btn-success'>
                        {isEdit ? "Update" : "Create"}
                    </button>
                    <button type="button" className='btn btn-secondary' onClick={() => navigate(-1)}>Cancel</button>
                </div>
            </form>
        </div>
    );
}

export default CompanyForm;