"use client";

import { FC, useEffect, useRef } from "react";
import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types";
import { formatCurrency } from "../lib/formatStrings";
import { useTranslations } from "next-intl";

export interface MonthCardProps {
    yearMonth: YearMonth,
    children?: React.ReactNode,
    unpaidTotal: number,
    payedTotal: number,
    currency?: string | null,
    expanded?:boolean,
    onToggle: (yearMonth:YearMonth) => void
}

export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, unpaidTotal, payedTotal, currency, expanded, onToggle }) => {

  const elRef = useRef<HTMLDivElement>(null);
  const t = useTranslations("home-page.month-card");

  // Setting the `month` will activate the accordion belonging to that month
  // If the accordion is already active, it will collapse it
  const handleChange = (event:any) => onToggle(yearMonth);

  useEffect(() => {
    if(expanded && elRef.current) {
      // if the element i selected > scroll it into view
      elRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, [expanded]);

  return(
    <div className={`collapse collapse-plus bg-base-200 my-1 sm:min-w-[25em] ${expanded ? "border-2 border-neutral" : ""}`} ref={elRef}>
      <input type="checkbox" name="my-accordion-3" checked={expanded} onChange={handleChange} />
      <div className={`collapse-title text-xl font-medium ${expanded ? "text-white" : ""}`}>
        {`${formatYearMonth(yearMonth)}`}
        {
          unpaidTotal>0 ?
            <p className="text-xs font-medium">
              {t("total-due-label")} <strong>{ formatCurrency(unpaidTotal, currency ?? "EUR") }</strong>
            </p> : null
        }
        {
          payedTotal>0 ?
            <p className="text-xs font-medium">
              {t("total-payed-label")} <strong>{ formatCurrency(payedTotal, currency ?? "EUR") }</strong>
            </p> : null
        }
      </div>
      <div className="collapse-content"> 
        {children}
      </div>
    </div>
  )
};