import { define } from "../../../utils.ts";
import LeasedHome from "../../../islands/LeasedHome.tsx";
import { page } from "fresh";
import { SessionCookie } from "../../auth/callback.ts";
import WelcomeBar from "../../../islands/WelcomeBar/WelcomeBar.tsx";
import { getAllProperties } from "../../../services/propertyService.ts";
import { getLeasesByOwner } from "../../../services/leaseService.ts";
import { createPublicId } from "../../../helpers.ts";
import type { Lease, Property } from "../../../db/interfaces.ts";

export const handler = define.handlers({
  async GET(ctx) {
    const stateData: SessionCookie = ctx.state.data;

    const ownerId = stateData.user_id;
    let leases: Lease[] = [];
    let properties: Property[] = [];

    leases = await getLeasesByOwner(ownerId);
    properties = await getAllProperties();

    const publicId = stateData.user_id
      ? await createPublicId(stateData.user_id)
      : "";

    return page({
      stateData,
      leases,
      properties,
      user_name: stateData.user_name,
      isEncrypted: stateData.user_encrypted,
      publicId,
      stateId: ctx.state.stateId,
    });
  },
});

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