import type { NextPage } from 'next';
import { MainLayout } from '../layout/MainLayout';
import { Input } from '../../components/Input';
import { Form, useForm } from 'react-hook-form';
import { Button } from '../../components/Button';
import Cookies from 'js-cookie';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { Toolbar } from '../../components/Toolbar';
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';

const CompaniaPage: NextPage = ()  => {

    const router = useRouter();
    const entityId: string = !!router.query.id ? router.query.id as string : "0";
    const baseUrl = process.env.API_URL;
    const { control, register,reset, setValue, formState: { isSubmitSuccessful, errors }  } = useForm(
        {
            defaultValues: {
                id: 0,
                ruc: '',
                nombre: '',
                direccion: ''
            }
        }
    );

    const getInitData = async () => {
        if (!entityId || entityId=="0")
            return;
        const { data, error } = await useFetchWithAuth("compania/" + entityId);
        
        if (!error) {
            
            if (data.id!=0){
                setValue("id", data['id'])
                setValue("ruc", data['ruc'])
                setValue("nombre", data['nombre'])
                setValue("direccion", data['direccion'])
            }

        } else {
            console.log(error)
        }
    }


    useEffect(() => {
        getInitData();
    }, [router.query.id])

    useEffect(() => {
        reset({
          id:0,
          ruc: "",
          nombre: '',
          direccion: ''
        });
      }, [isSubmitSuccessful])

    return (
    <>
    <MainLayout title={'Compañia'}  >
        <Toolbar pathForm='/compania/form' pathList='/compania/' currentEntity={""} entityName='compania'/>
        <div className='h-96 w-4/6 mx-auto p-4 border-solid border-gray-300 border-2 rounded-xl  '>
            <Form 
                action={baseUrl+"/api/compania/"} 
                control={control}
                headers={{
                    'Authorization': Cookies.get("token") || '',
                    'Content-Type': 'application/json'
                }}
                >
                <Input id='id' label='' register={register} type='hidden'/>
                <Input id='ruc' label='RUC' register={register} />
                <Input id="nombre" label='Nombre' register={register}/>
                <Input id="direccion" label='Dirección' register={register}/>
        
                <Button type='submit' title='Guardar' />
                {errors?.root?.server && <p>Form submit failed.</p>}
            </Form>            
        </div>
    </MainLayout>
    </>
    )
}

export default CompaniaPage