"use client";

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


export interface MonthCardProps {
    yearMonth: YearMonth,
    children?: React.ReactNode,
    monthlyExpense:number,
    expanded?:boolean,
    onToggle: (yearMonth:YearMonth) => void
}

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

  const elRef = useRef<HTMLDivElement>(null);

  // 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)}`}
        {
          monthlyExpense>0 ?
            <p className="text-xs font-medium">
              Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
            </p> : null
        }
      </div>
      <div className="collapse-content"> 
        {children}
      </div>
    </div>
  )
};