import React, { useEffect, useRef } from 'react'
import { Link, Head, useForm, usePage } from '@inertiajs/react'
import { toast } from 'react-toastify'

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
import PrimaryButton from '@/Components/PrimaryButton'
import InputLabel from '@/Components/InputLabel'
import TextInput from '@/Components/TextInput'
import InputError from '@/Components/InputError'
import InputFile from '@/Components/InputFile'

export default function FormDocument(props) {
    const inputDocument = useRef()
    const { types, categories, companies, doc }= props

    const { data, setData, post, processing, errors } = useForm({
        no_doc: '',
        name: '',
        type_id: '',
        category_id: '',
        publisher: '',
        description: '',
        publish_date: '',
        due_date: '',
        status: 0,
        type: 0,
        company_id: '',
        document: null,
        document_name: '',
    });

    useEffect(() => {
        if(doc !== undefined) {
            setData({
                no_doc: doc.no_doc,
                name: doc.name,
                type_id: doc.type_id,
                category_id: doc.category_id,
                publisher: doc.publisher,
                description: doc.description,
                publish_date: doc.publish_date,
                due_date: doc.due_date,
                status: doc.status,
                type: doc.type,
                company_id: doc.company_id,
                document: null,
                document_name: doc.document,
            })
        }
    }, [doc]);

    const onHandleChange = (event) => {
        setData(event.target.name, event.target.type === 'checkbox' ? event.target.checked : event.target.value);
    };

    const submit = (e) => {
        e.preventDefault();

        if(doc !== undefined) {
            post(route('docs.update', doc), {
                onError: () => toast.error('please recheck the data')
            });
            return
        }
        post(route('docs.store'), {
            onError: () => toast.error('please recheck the data')
        });
    };

    return (
        <AuthenticatedLayout
            auth={props.auth}
            errors={props.errors}
            flash={props.flash}
            notify={props.notify}
        >
            <Head title="Document - Form" />

            <div className="flex flex-col w-full px-6 lg:px-8 space-y-2">
                <div className="card bg-base-100 w-full">
                    <div className="card-body">
                        <p className='font-bold text-2xl mb-4'>Dokumen</p>
                        <div className="overflow-x-auto">
                        <form onSubmit={submit}>
                            <div className='mt-4 pl-1'>
                                <InputLabel forInput="type" value="Jenis" />
                                <select 
                                    className="mt-1 select select-bordered w-full" 
                                    name="type_id" 
                                    onChange={onHandleChange}
                                    value={data.type_id}
                                >
                                    <option selected disabled></option>
                                    {types.map(type => (
                                        <option key={type.id} value={type.id}>{type.name}</option>
                                    ))}
                                </select>
                                <InputError message={errors.type_id}/>
                            </div>
                            <div className='mt-4 pl-1'>
                                <InputLabel forInput="category" value="Ketegori" />
                                <select 
                                    className="mt-1 select select-bordered w-full" 
                                    name="category_id" 
                                    onChange={onHandleChange}
                                    value={data.category_id}
                                >
                                    <option selected disabled></option>
                                    {categories.map(category => (
                                        <option key={category.id} value={category.id}>{category.name}</option>
                                    ))}
                                </select>
                                <InputError message={errors.category_id}/>
                            </div>
                            <div className='mt-4 pl-1'>
                                <InputLabel forInput="company" value="Nama Perusahaan" />
                                <select 
                                    className="mt-1 select select-bordered w-full" 
                                    name="company_id" 
                                    onChange={onHandleChange}
                                    value={data.company_id}
                                >
                                    <option selected disabled></option>
                                    {companies.map(company => (
                                        <option key={company.id} value={company.id}>{company.name}</option>
                                    ))}
                                </select>
                                <InputError message={errors.company_id}/>
                            </div>
                            <div className='mt-4'>
                                <InputLabel forInput="no_doc" value="No Dokumen" />
                                <TextInput
                                    type="text"
                                    name="no_doc"
                                    value={data.no_doc}
                                    className="mt-1 block w-full"
                                    autoComplete={"false"}
                                    handleChange={onHandleChange}
                                    isError={errors.no_doc}
                                />
                                <InputError message={errors.no_doc}/>
                            </div>
                            {/* <div className='mt-4'>
                                <InputLabel forInput="name" value="Nama Dokumen" />
                                <TextInput
                                    type="text"
                                    name="name"
                                    value={data.name}
                                    className="mt-1 block w-full"
                                    autoComplete={"false"}
                                    handleChange={onHandleChange}
                                    isError={errors.name}
                                />
                                <InputError message={errors.name}/>
                            </div> */}
                            <div className='mt-4'>
                                <InputLabel forInput="publisher" value="Penerbit" />
                                <TextInput
                                    type="text"
                                    name="publisher"
                                    value={data.publisher}
                                    className="mt-1 block w-full"
                                    autoComplete={"false"}
                                    handleChange={onHandleChange}
                                    isError={errors.publisher}
                                />
                                <InputError message={errors.publisher}/>
                            </div>
                            <div className='mt-4'>
                                <div className="flex w-80 justify-between items-center">
                                    <InputLabel value="Tipe" />
                                    <label className="label cursor-pointer gap-2 pl-20">
                                        <span className="label-text">Tetap</span> 
                                        <input type="radio" name="type" onChange={onHandleChange} value="1" className="radio" checked={+data.type == 1} />
                                    </label>
                                    <label className="label cursor-pointer gap-2">
                                        <span className="label-text">Tidak Tetap</span> 
                                        <input type="radio" name="type" onChange={onHandleChange} value="0" className="radio" checked={+data.type == 0} />
                                    </label>
                                </div>
                            </div>
                            <div className='mt-4'>
                                <InputLabel forInput="publish_date" value="Tanggal Terbit" />
                                <TextInput
                                    type="date"
                                    name="publish_date"
                                    placeholder='dd-mm-yyyy'
                                    value={data.publish_date}
                                    className="mt-1 block w-full"
                                    autoComplete={"false"}
                                    handleChange={onHandleChange}
                                    isError={errors.publish_date}
                                />
                                <InputError message={errors.publish_date}/>
                            </div>
                            <div className='mt-4'>
                                <InputLabel forInput="due_date" value="Tanggal Jatuh Tempo" />
                                <TextInput
                                    type="date"
                                    name="due_date"
                                    value={data.due_date}
                                    className="mt-1 block w-full"
                                    autoComplete={"false"}
                                    handleChange={onHandleChange}
                                    isError={errors.due_date}
                                />
                                <InputError message={errors.due_date}/>
                            </div>
                            <div className='mt-4'>
                                <InputLabel forInput="description" value="Keterangan" />
                                <TextInput
                                    type="textarea"
                                    name="description"
                                    value={data.description}
                                    className="mt-1 block w-full"
                                    handleChange={onHandleChange}
                                    isError={errors.description}
                                />
                                <InputError message={errors.description}/>
                            </div>
                            <div className='mt-4'>
                                <InputLabel forInput="document" value="Dokumen" />
                                <InputFile  
                                    file={data.document} 
                                    isError={errors.document} 
                                    inputRef={inputDocument} 
                                    handleChange={e => setData('document', e.target.files[0])}
                                />
                                <InputError message={errors.document}/>
                                {doc !== undefined && (
                                    <p className='text-sm'>file saved is found, reupload to replace</p>
                                )}
                            </div>
                            <div className='mt-4'>
                                <div className="flex w-32 justify-between items-center">
                                    <InputLabel value="Status" />
                                    <label className="label cursor-pointer gap-2 pl-20">
                                        <span className="label-text">Ya</span> 
                                        <input type="radio" name="status" onChange={onHandleChange} value="1" className="radio" checked={+data.status == 1} />
                                    </label>
                                    <label className="label cursor-pointer gap-2">
                                        <span className="label-text">Tidak</span> 
                                        <input type="radio" name="status" onChange={onHandleChange} value="0" className="radio" checked={+data.status == 0} />
                                    </label>
                                </div>
                            </div>
                            
                            <div className="flex items-center justify-between mt-4">
                                <PrimaryButton processing={processing}>
                                    Simpan
                                </PrimaryButton>

                                <Link href={route('docs.index')} className="btn btn-outline">
                                    Batal
                                </Link>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    )
}