"use client";

import { FC, ReactNode } from "react";
import { Bill, BillingLocation } from "../lib/db-types";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import { deleteBillById } from "../lib/actions/billActions";
import Link from "next/link";
import { useTranslations } from "next-intl";

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

export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {

    const { year, month } = location.yearMonth;
    const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month);
    const [ state, dispatch ] = useFormState(handleAction, null);
    const t = useTranslations("bill-delete-form");

    return(
        <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">
                    {
                        t.rich("text", {
                            bill_name:bill.name,
                            location_name:location.name,
                            strong: (chunks:ReactNode) => `<strong>${chunks}</strong>`,
                        })
                    }
                    </p>
                    <div className="pt-4 text-center">
                        <button className="btn btn-primary">{t("confirm-button")}</button>
                        <Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
                    </div>
                </form>
            </div>
        </div>
    )
}