"use client";
import React from "react";

import {
  loginSelectEmployee,
  loginSelectOccupant,
} from "@/apicalls/login/login";
import { useRouter } from "next/navigation";

function SelectList({
  selectionList,
  isEmployee,
  isOccupant,
}: {
  selectionList: {
    uu_id: string;
    public_name: string;
    company_type: string;
    company_address: string;
  }[];
  isEmployee: boolean;
  isOccupant: boolean;
}) {
  const router = useRouter();

  const setSelectionHandler = (uu_id: string) => {
    if (isEmployee) {
      console.log("Selected isEmployee uu_id:", uu_id);
      loginSelectEmployee({ company_uu_id: uu_id })
        .then((responseData: any) => {
          if (responseData?.status === 200 || responseData?.status === 202) {
            router.push("/dashboard");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    } else if (isOccupant) {
      console.log("Selected isOccupant uu_id:", uu_id);
      loginSelectOccupant({ build_living_space_uu_id: uu_id })
        .then((responseData: any) => {
          if (responseData?.status === 200 || responseData?.status === 202) {
            router.push("/dashboard");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    }
  };

  return (
    <>
      {selectionList.map((item: any, index: number) => (
        <div
          key={index}
          className="w-full p-4 m-2 bg-emerald-300 hover:bg-emerald-500 rounded-lg transition-colors duration-200 cursor-pointer"
          onClick={() => setSelectionHandler(item.uu_id)}
        >
          <div className="flex flex-col items-center md:items-start">
            <div>
              <span className="text-2xl font-medium">{item.public_name}</span>
              <span className="font-medium text-sky-500">
                {item.company_type}
              </span>
            </div>
            <div>
              <span className="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
                <span>{item.uu_id}</span>
              </span>
            </div>
            <div>
              <span className="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
                <span>{item.company_address}</span>
              </span>
            </div>
          </div>
        </div>
      ))}
    </>
  );
}

export default SelectList;
