import { define } from "../../../utils.ts";
import { page } from "fresh";
import {
  getIncomesByUser,
  Income,
} from "../../../services/financhalServices.ts";
import IncomeList from "../../../islands/IncomeList.tsx";
import { SessionCookie } from "../../auth/callback.ts";
import { createPublicId } from "../../../helpers.ts";

export const handler = define.handlers({
  GET: async (ctx) => {
    const state = ctx.state;
    const stateData: SessionCookie = state.data;
    const url = new URL(ctx.req.url);
    const modalParam = url.searchParams.get("modal");
    const openModal = modalParam?.toLowerCase() === "on";

    const incomes = stateData?.user_id
      ? await getIncomesByUser(stateData.user_id)
      : [];
    const orderedIncomes = incomes.slice().reverse();

    const publicId = stateData?.user_id
      ? await createPublicId(stateData.user_id)
      : "";
    const isEncrypted = stateData?.user_encrypted;
    return page({
      stateData,
      incomes: orderedIncomes,
      publicId,
      user_name: stateData.user_name,
      isEncrypted,
      urlRoute: url.pathname,
      stateId: state.stateId,
      openModal,
    });
  },
});

export default define.page(
  (
    { data }: {
      data: {
        stateData: SessionCookie;
        incomes: Income[];
        publicId: string;
        user_name: string;
        isEncrypted: boolean;
        urlRoute: string;
        stateId: string;
        openModal: boolean;
      };
    },
  ) => (
    <main class="min-h-screen flex flex-col items-center justify-start pt-0">
      <div class="w-full max-w-4xl px-8 sm:px-12 lg:px-24 mt-8">
        <IncomeList
          incomes={data.incomes || []}
          userId={data.publicId}
          openModal={data.openModal}
        />
      </div>
    </main>
  ),
);