"use client";

import { FC } from "react";
import { Bill, BillingLocation } from "../lib/db-types";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import { gotoHome } from "../lib/actions/navigationActions";
import { deleteBillById } from "../lib/actions/billActions";

export interface BillDeleteFormProps {
    bill: Bill,
    location: BillingLocation
}

export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
{
    const handleAction = deleteBillById.bind(null, location._id, bill._id, location.yearMonth.year, location.yearMonth.month);
    const [ state, dispatch ] = useFormState(handleAction, null);

    const handleCancel = () => {
        gotoHome(location.yearMonth);
    };

    return(
        <Main>
            <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                <div className="card-body">
                    <form action={dispatch}>
                        <p className="py-6 px-6">
                            Please confirm deletion of bill “<strong>{bill.name}</strong>” at “<strong>{location.name}</strong>”.
                        </p>
                        <div className="pt-4 text-center">
                          <button className="btn btn-primary">Confim</button>
                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </Main>
    )
}