'client only';

import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
import { FC, ReactNode } 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 { useTranslations } from "next-intl";

export interface LocationCardProps {
    location: BillingLocation
}

export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {

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

    // sum all the billAmounts
    const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
    
    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={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
                    <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
                </Link>
                <h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
                <div className="card-actions">
                    {
                        bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
                    }
                    <Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
                        <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
                    </Link>
                </div>
                {
                    monthlyExpense > 0 ?
                    <p>
                        {
                            t.rich("payed-total", {
                                amount: formatCurrency(monthlyExpense),
                                strong: (chunks:ReactNode) => `<strong>${chunks}</strong>`
                        })}
                    </p>
                    : null
                }
            </div>
        </div>);
};