"use client";

import HeaderManagement from "@/components/landing-page/header-management";
import SidebarManagement from "@/components/landing-page/sidebar-management";
import { close, loading } from "@/config/swal";
import { getCookiesDecrypt } from "@/lib/utils";
import { getInfoProfile, getUsersTeams, saveUserReports } from "@/service/landing/landing";
import React, { useEffect, useState } from "react";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import Image from "next/image";
import { useTranslations } from "next-intl";

const page = () => {
  const [user, setUser] = useState<any>();
  const [profile, setProfile] = useState<any>();
  const instituteId = getCookiesDecrypt("uinse");
  const [userSelected, setUserSelected] = useState();
  const [reportMessage, setReportMessage] = useState<string>();
  const MySwal = withReactContent(Swal);
  const { toast } = useToast();
  const [reportMessageOpen, setReportMessageOpen] = useState(false);
  const t = useTranslations("LandingPage");

  // const launchModal = (user: any) => {
  //   setUserSelected(user);
  //   $("#modalDetailProfile").modal("show");
  // };
  async function onSubmit() {
    MySwal.fire({
      title: "Simpan Data",
      text: "",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save();
      }
    });
  }

  async function save() {
    setReportMessageOpen(false);

    loading();
    const data = {
      userId: user?.id,
      message: reportMessage,
    };

    const response = await saveUserReports(data);

    if (response?.error) {
      toast({
        variant: "destructive",
        title: "Uh oh! Something went wrong.",
      });
      // error(response?.message);
      return false;
    }

    close();

    toast({
      title: "Success !!",
    });

    // toast.success("SUKSES !!", {
    //   position: "top-right",
    // });
    // successSubmit();
  }

  function successSubmit() {
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        ("hide");
        // $("#modalReportProfile").modal("hide");
      }
    });
  }

  useEffect(() => {
    async function getTeams() {
      if (instituteId != undefined) {
        loading();
        const response = await getUsersTeams(instituteId);
        setUser(response?.data?.data);
        close();
      }
    }

    async function getProfile() {
      loading();
      const response = await getInfoProfile();
      setProfile(response?.data?.data);
      close();
    }

    getTeams();
    getProfile();
  }, []);

  return (
    <>
      <HeaderManagement />
      <div className="flex flex-col lg:flex-row">
        <SidebarManagement />
        <div className="w-2/3 p-12">
          <div className="flex flex-col">
            <p className="text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-center text-white my-4 ">
              <span className="text-black">{t("team", { defaultValue: "Team" })} </span>
              {profile?.institute?.name}
            </p>
            <p className="text-base mb-3">
              {user?.length} {t("teamMembers", { defaultValue: "Team Members" })} {profile?.institute?.name}
            </p>
          </div>
          <div className="flex flex-row gap-5">
            {user?.map((row: any) => (
              <div key={row?.id}>
                <Dialog>
                  <DialogTrigger>
                    <div className="flex flex-col items-center border border-gray-500 p-2 bg-[#f8f8f8]  rounded-md">
                      <Image src="/assets/gg-profile.png" alt="" width={1280} height={720} className="h-10 w-10 mb-4" />
                      <p className="font-bold text-base text-black">{row?.fullname}</p>
                      <p className="text-sm font-light text-black">{row?.username || "username"}</p>
                    </div>
                  </DialogTrigger>
                  <DialogContent className="flex flex-row justify-center" size="sm">
                    <div className="flex flex-col w-full gap-2">
                      <div>
                        <h1 className="font-semibold">{row?.fullname}</h1>
                      </div>
                      <div className="border-b border-black w-full"></div>
                      <div className="gap-1">
                        <div className="font-light">{row?.email}</div>
                        <div className="font-light">{row?.phoneNumber}</div>
                        <div className="font-light">{row?.address}</div>
                      </div>
                      <div className="border-b border-black w-full"></div>
                      <div className="place-items-end">
                        <Dialog open={reportMessageOpen} onOpenChange={setReportMessageOpen}>
                          <DialogTrigger asChild>
                            <Button variant="outline" className="bg-red-500 rounded-md text-white hover:bg-white hover:text-red-500">
                              Report
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="sm:max-w-[425px]">
                            <div className="flex flex-col w-full gap-2">
                              <div>
                                <h1 className="font-semibold">{row?.fullname}</h1>
                              </div>
                              <div className="border-b border-black w-full"></div>
                              <div className="flex flex-col">
                                <h1 className="text-red-600 mb-2">{t("reasonReport", { defaultValue: "Reason Report" })}</h1>
                                <textarea id="formControlTextarea1" rows={4} className="border border-black font-light" onChange={(e: any) => setReportMessage(e.target.value)} />
                              </div>
                            </div>
                            <DialogFooter>
                              <Dialog>
                                <DialogTrigger asChild>
                                  <Button className="bg-red-500 text-white" type="submit">
                                    {t("send", { defaultValue: "Send" })}
                                  </Button>
                                </DialogTrigger>
                                <DialogContent>
                                  <h1>{t("saveData", { defaultValue: "Save Data" })}</h1>
                                  <DialogFooter>
                                    <DialogClose>
                                      <Button onClick={save}>{t("save", { defaultValue: "Save" })}</Button>
                                    </DialogClose>
                                    <DialogClose>
                                      <Button>{t("cancel", { defaultValue: "Cancel" })}</Button>
                                    </DialogClose>
                                  </DialogFooter>
                                </DialogContent>
                              </Dialog>
                            </DialogFooter>
                          </DialogContent>
                        </Dialog>
                      </div>
                    </div>
                  </DialogContent>
                </Dialog>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

export default page;