evidencija-rezija/app/ui/LocationCard.tsx

'use client';

import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { toast } from "react-toastify";

export interface LocationCardProps {
    location: BillingLocation;
    currency?: string | null;
}

export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
    const {
        _id,
        name,
        yearMonth,
        bills,
        seenByTenant,
        // NOTE: only the fileName is projected from the DB to reduce data transfer
        utilBillsProofOfPaymentUploadedAt
    } = location;

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

    // sum all the paid bill amounts (regardless of who pays)
    const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);

    const handleCopyLinkClick = () => {
        // copy URL to clipboard
        const url = `${window.location.origin}/${currentLocale}/share/location/${_id}`;
        navigator.clipboard.writeText(url);

        // use NextJS toast to notiy user that the link was copied
        toast.success(t("link-copy-message"), { theme: "dark" });
    }

    return (
        <div data-key={_id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
            <div className="card-body">
                <Link href={`/home/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
                    <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-[-.2rem] right-0 text-2xl" />
                </Link>
                <h2 className="card-title mr-[2em] mt-[-1em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
                {
                    bills.length > 0 ? (
                        <div className="card-actions mb-1">
                            {
                                bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
                            }
                        </div>
                    ) : null
                }
                <div className="flex justify-between items-center mb-0">
                    <Link href={`/home/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
                        <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline" /><span className="text-xs ml-[0.2rem]">{t("add-bill-button-tooltip")}</span>
                    </Link>
                    <ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline hover:text-red-500" title="create sharable link" onClick={handleCopyLinkClick} />
                </div>
                {monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentUploadedAt ?
                <>
                    <div className="divider m-0 font-bold uppercase">{t("monthly-statement-legend")}</div>
                        {
                            monthlyExpense > 0 ?
                                <div className="flex items-center gap-2 ml-2">
                                    <BanknotesIcon className="h-5 w-5" />
                                    {t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
                                    <CheckCircleIcon className="h-5 w-5 text-success" />
                                </div>
                                : null
                        }
                        {seenByTenant && (
                            <div className="flex items-center gap-2 mt-[-0.2rem] ml-2">
                                <EyeIcon className="h-5 w-5" />
                                <span className="text-sm">{t("seen-by-tenant-label")}</span>
                                <CheckCircleIcon className="h-5 w-5 text-success" />
                            </div>
                        )}
                        {utilBillsProofOfPaymentUploadedAt && (
                            <Link
                                href={`/share/proof-of-payment/${_id}/`}
                                target="_blank"
                                className="flex items-center gap-2 mt-[-0.2rem] ml-2"
                            >
                                <TicketIcon className="h-5 w-5" />
                                <span className="text-sm">{t("download-proof-of-payment-label")}</span>
                                <CheckCircleIcon className="h-5 w-5 text-success" />
                            </Link>
                        )}
                    </>: null
                }

            </div>
        </div>);
};