"use client";

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

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

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

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

    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage, hub3aText } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
    const { _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>
            {
                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={`/share/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
            }
            {
                hub3aText ?
                    <div className="form-control p-1">
                        <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
                            <Pdf417Barcode hub3aText={hub3aText} />
                        </label>
                        <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
                    </div> : 
                    (
                        // LEGACY SUPPORT ... untill all bills have been migrated
                        barcodeImage ?
                        <div className="p-1">
                            <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
                                <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>);
}