"use client";

import { TrashIcon } from "@heroicons/react/24/outline";
import { PlainBill } from "../lib/db-types";
import { FC } from "react";
import { useFormState } from "react-dom";
import { updateBill } from "../lib/actions";


export interface BillEditFormProps {
    invoiceID: string,
    bill: PlainBill
}

export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name, paid } }) => {

    const initialState = { message: null, errors: {} };
    const updateBillWithId = updateBill.bind(null, invoiceID, id);
    const [ state, dispatch ] = useFormState(updateBillWithId, initialState);

    return(
    <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
        <div className="card-body">
            <form action={ dispatch }>
                <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />

                <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} />
                <div id="status-error" aria-live="polite" aria-atomic="true">
                    {state.errors?.billName &&
                    state.errors.billName.map((error: string) => (
                        <p className="mt-2 text-sm text-red-500" key={error}>
                        {error}
                        </p>
                    ))}
                </div>

                {
                    // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
                    // <a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
                    // <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                    // 2023-22-12 document GSKG račun za 2023.pdf
                    // </a>
                }
                <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
                <div id="status-error" aria-live="polite" aria-atomic="true">
                    {state.errors?.billAttachment &&
                    state.errors.billAttachment.map((error: string) => (
                        <p className="mt-2 text-sm text-red-500" key={error}>
                        {error}
                        </p>
                    ))}
                </div>

                <div className="form-control w-32 p-1">
                    <label className="cursor-pointer label p-0">
                        <span className="label-text">Paid</span> 
                        <input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} />
                    </label>
                </div>

                <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Note"></textarea>
                <div id="status-error" aria-live="polite" aria-atomic="true">
                    {state.errors?.billNotes &&
                    state.errors.billNotes.map((error: string) => (
                        <p className="mt-2 text-sm text-red-500" key={error}>
                        {error}
                        </p>
                    ))}
                </div>

                <div id="status-error" aria-live="polite" aria-atomic="true">
                    {state.message &&
                    <p className="mt-2 text-sm text-red-500">
                    {state.message}
                    </p>
                    }
                </div>
                <button type="submit" className="btn btn-primary">Save</button>
            </form>
        </div>
    </div>);
}