"use client";

import { DocumentIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
import { Bill, BillingLocation } from "../lib/db-types";
import React, { FC } from "react";
import { updateOrAddBill } from "../lib/actions/billActions";
import Link from "next/link";
import { formatYearMonth } from "../lib/format";
import { useLocale, useTranslations } from "next-intl";

// Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
// This is a workaround for that
const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, billYear:number|undefined, billMonth:number|undefined, prevState:any, formData: FormData) => {
    // URL encode the file name of the attachment so it is correctly sent to the server
    const billAttachment = formData.get('billAttachment') as File;
    formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
    return updateOrAddBill(locationId, billId, billYear, billMonth, prevState, formData);
}

export interface ViewBillCardProps {
    location: BillingLocation,
    bill?: Bill,
}

export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {

    const t = useTranslations("bill-edit-form");
    const locale = useLocale();

    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };

    const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;


    return(
    <div className="card card-compact card-bordered bg-base-100 shadow-s">
        <div className="card-body">
            <h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2>
            <span className="textarea textarea-bordered max-w-[400px] w-full grow">
                <h3 className="text-xl dark:text-neutral-300">{name}</h3>
            </span>
            <p className={`flex textarea textarea-bordered max-w-[400px] w-full block ${paid ? "bg-green-950" : "bg-red-950"}`}>
                <span className="font-bold uppercase">{t("paid-checkbox")}</span>
                <span className="text-right inline-block grow">{paid ? <CheckCircleIcon className="h-[1em] w-[1em] ml-[.5em] text-2xl inline-block text-green-500"/> : <XCircleIcon className="h-[1em] w-[1em] text-2xl inline-block text-red-500" />}</span>
            </p>

            <p className="flex textarea textarea-bordered max-w-[400px] w-full block">
                <span className="font-bold uppercase">{t("payed-amount")}</span>
                <span className="text-right inline-block grow">{payedAmount ? payedAmount/100 : ""}</span>
            </p>
            <input type="hidden" name="barcodeImage" value={barcodeImage} />
            {
                notes ?
                        <span className="textarea textarea-bordered max-w-[400px] w-full grow">
                            <p className="font-bold uppercase">{t("notes-placeholder")}</p>
                            <p className="leading-[1.4em]">
                                {notes}
                            </p>
                        </span>
                    : null
            }
            {
                attachment ?
                <span className="textarea textarea-bordered max-w-[400px] w-full grow">
                    <p className="font-bold uppercase">{t("attachment")}</p>
                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-2'>
                        <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                            {decodeURIComponent(attachment.fileName)}
                    </Link>
                </span>
                : null
            }
            {
                barcodeImage ?
                <div className="p-1">
                    <label className="label p-2 grow bg-white">
                        <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
                    </label>
                    <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
                </div> : null
            }

            <div className="text-right">
                <Link className="btn btn-neutral ml-3" href={`/share/location/${locationID}`}>{t("back-button")}</Link>
            </div>

        </div>
    </div>);
}