"use client";

import React from "react";
import { AddLocationButton } from "./AddLocationButton";
import { AddMonthButton } from "./AddMonthButton";
import { MonthCard } from "./MonthCard";
import Pagination from "./Pagination";
import { LocationCard } from "./LocationCard";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { useRouter, useSearchParams } from "next/navigation";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const getNextYearMonth = (yearMonth:YearMonth) => {
    const {year, month} = yearMonth;
    return({
        year: month===12 ? year+1 : year,
        month: month===12 ? 1 : month+1
    } as YearMonth);
}

export interface MonthLocationListProps {
    availableYears?: number[];
    months?: {
        [key: string]: {
            yearMonth: YearMonth;
            locations: BillingLocation[];
            monthlyExpense: number;
        };
    };
}

export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
    availableYears,
    months,
}) => {

    const router = useRouter();
    const search = useSearchParams();

    const initialMonth = search.get('month')
    
    const [expandedMonth, setExpandedMonth] = React.useState<number>(
        initialMonth ? parseInt(initialMonth as string) : -1 // no month is expanded
    );

    if(!availableYears || !months) {
        const currentYearMonth:YearMonth = {
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1
          };
      
        return(
            <>
            <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0} onToggle={() => {}} expanded={true} >
                <AddLocationButton yearMonth={currentYearMonth} />
            </MonthCard>
        </>)
    };

    const monthsArray = Object.entries(months);

    // when the month is toggled, update the URL
    // and set the the new expandedMonth
    const handleMonthToggle = (yearMonth:YearMonth) => {
        // if the month is already expanded, collapse it
        if(expandedMonth === yearMonth.month) {
            // router.push(`/?year=${yearMonth.year}`);
            setExpandedMonth(-1); // no month is expanded
        } else  {
            // router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
            setExpandedMonth(yearMonth.month);
        }
    }

    return(<>
            <AddMonthButton yearMonth={getNextYearMonth(monthsArray[0][1].locations[0].yearMonth)} />
            {
                monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
                <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
                    {
                        yearMonth.month === expandedMonth ? 
                            locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
                            : null
                    }
                    <AddLocationButton yearMonth={yearMonth} />
                </MonthCard>
                )
            }
            <div className="mt-5 flex w-full justify-center">
                <Pagination availableYears={availableYears} />
            </div>
            <ToastContainer />
        </>)
}