"use client";
import Image from "next/image";
import React from "react";
import Loader from "@/components/common/Loader";

import { Toaster } from "@/components/ui/toaster";
import { useToast } from "@/hooks/use-toast";
import { showToast } from "./toaster";
import { useRouter } from "next/navigation";
import { loginSelectEmployee } from "@/(apicalls)/login/login";

interface CompanyList {
  company_list: Array<string>;
}

const LoginSelectEmployee: React.FC<CompanyList> = ({ company_list }) => {
  const { toast } = useToast();
  const router = useRouter();
  const [isLoading, setIsLoading] = React.useState(false);

  const companiesList = company_list || [];
  const onClick = (data: any) => {
    setIsLoading(true);
    loginSelectEmployee({ company_uu_id: data?.uu_id })
      .then((responseData: any) => {
        if (responseData?.completed) {
          showToast(toast, "Şirket seçimi", {
            message: "Şirket seçimi başarılı",
            data: JSON.stringify(responseData),
          });
          setIsLoading(false);
          router.push("/dashboard");
        }
      })
      .catch((error) => {
        console.error(error);
        showToast(toast, "Şirket seçimi", {
          message: "Şirket seçimi başarılı",
          data: JSON.stringify(error),
        });
      });
  };

  if (isLoading) {
    return <Loader />;
  } else {
    return (
      <>
        <div>
          <div>
            <Toaster />
          </div>
          <div className="sm:grid sm:grid-cols-3 sm:gap-4">
            {companiesList.map((data: any) => (
              <div className="flex" key={data.uu_id}>
                <div
                  className="flex sm:h-56 hover:bg-white bg-emerald-800 m-3 ring-1 shadow-xl ring-emerald-700 p-3 h-64 rounded-2xl"
                  key={data.uu_id}
                  onClick={() => onClick(data)}
                >
                  <div className="lg:w-1/4">
                    <Image
                      src={"/green-house.webp"}
                      alt={`Evyos ${data.uu_id}`}
                      className=" w-full h-full object-cover"
                      width={300}
                      height={300}
                    />
                  </div>
                  <div className="lg:w-3/4 m-5">
                    <h2 className="text-lg font-bold mb-2">
                      UUID : {data.uu_id}
                    </h2>
                    <h2 className="text-lg font-bold mb-2">
                      Şirket Unvanı : {data.public_name}
                    </h2>
                    <h2 className="text-lg font-bold mb-2">
                      Şirket Tipi Name : {data.company_type}
                    </h2>
                    <h2 className="text-lg font-bold mb-2">
                      Adres :{" "}
                      {data.company_address
                        ? data.company_address
                        : "Tanımlı Değil"}
                    </h2>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </>
    );
  }
};

export default LoginSelectEmployee;