evidencija-rezija/app/ui/ViewLocationCard.tsx

'use client';

import { FC } from "react";
import { BilledTo, BillingLocation, UserSettings } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
import { useTranslations } from "next-intl";
import { ViewBillBadge } from "./ViewBillBadge";
import { Pdf417Barcode } from "./Pdf417Barcode";
import { PaymentParams } from "hub-3a-payment-encoder";
import Link from "next/link";
import { DocumentIcon } from "@heroicons/react/24/outline";

export interface ViewLocationCardProps {
    location: BillingLocation;
    userSettings: UserSettings | null;
}

export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettings}) => {

    const { _id, name: locationName, yearMonth, bills, tenantName, tenantStreet, tenantTown, generateTenantCode } = location;

    const t = useTranslations("home-page.location-card");

    // sum all the billAmounts (only for bills billed to tenant)
    const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0);

    const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0,19);

    const paymentParams:PaymentParams = {
        Iznos: (monthlyExpense/100).toFixed(2).replace(".",","),
        ImePlatitelja: tenantName ?? "",
        AdresaPlatitelja: tenantStreet ?? "",
        SjedistePlatitelja: tenantTown ?? "",
        Primatelj: userSettings?.ownerName ?? "",
        AdresaPrimatelja: userSettings?.ownerStreet ?? "",
        SjedistePrimatelja: userSettings?.ownerTown ?? "",
        IBAN: userSettings?.ownerIBAN ?? "",
        ModelPlacanja: "HR00",
        PozivNaBroj: formatYearMonth(yearMonth),
        SifraNamjene: "",
        OpisPlacanja: `Režije-${locationNameTrimmed_max20}-${formatYearMonth(yearMonth)}`, // max length 35 = "Režije-" (7) + locationName (20) + "-" (1) + "YYYY-MM" (7)
    };

    return(
        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
            <div className="card-body">
                <h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {locationName}</h2>
                <div className="card-actions mt-[1em] mb-[1em]">
                    {
                        bills.filter(bill => (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant).map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
                    }
                </div>
                {
                    monthlyExpense > 0 ?
                    <p className="text-[1.2rem]">
                        { t("payed-total-label") } <strong>{formatCurrency(monthlyExpense, userSettings?.currency)}</strong>
                    </p>
                    : null
                }
                {
                    userSettings?.show2dCodeInMonthlyStatement && generateTenantCode ?
                    <>
                        <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
                        <ul className="ml-4 mb-3">
                            <li><strong>{t("payment-iban-label")}</strong><pre className="inline pl-1">{paymentParams.IBAN}</pre></li>
                            <li><strong>{t("payment-recipient-label")}</strong> <pre className="inline pl-1">{paymentParams.Primatelj}</pre></li>
                            <li><strong>{t("payment-recipient-address-label")}</strong><pre className="inline pl-1">{paymentParams.AdresaPrimatelja}</pre></li>
                            <li><strong>{t("payment-recipient-city-label")}</strong><pre className="inline pl-1">{paymentParams.SjedistePrimatelja}</pre></li>
                            <li><strong>{t("payment-amount-label")}</strong> <pre className="inline pl-1">{paymentParams.Iznos}</pre></li>
                            <li><strong>{t("payment-description-label")}</strong><pre className="inline pl-1">{paymentParams.OpisPlacanja}</pre></li>
                            <li><strong>{t("payment-model-label")}</strong><pre className="inline pl-1">{paymentParams.ModelPlacanja}</pre></li>
                            <li><strong>{t("payment-reference-label")}</strong><pre className="inline pl-1">{paymentParams.PozivNaBroj}</pre></li>
                            <li><strong>{t("payment-purpose-code-label")}</strong><pre className="inline pl-1">{paymentParams.SifraNamjene}</pre></li>
                        </ul>
                        <Pdf417Barcode paymentParams={paymentParams} />
                    </>
                    : null
                }
                <Link href={`/proof-of-payment/locationID/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-4'>
                    <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                    potvrda-o-uplati.pdf
                    {/*decodeURIComponent(attachment.fileName)*/}
                </Link>
                <div className="form-control w-full mb-4">
                    <label className="label">
                        <span className="label-text">{t("upload-proof-of-payment-label")}</span>
                    </label>
                    <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered grow file-input-s my-2 block max-w-[17em] md:max-w-[80em] break-words"  />
                </div>
            </div>
        </div>);
};