import { alterarResponsavel } from "@/requests/CRM/kanban";
import { listarTodosCargos } from "@/requests/CRUD/Perfil/listarPerfil";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { X } from "lucide-react";
import { Fragment, useEffect, useState } from "react";
import Button from "../Forms/Button";
import AvatarInput from "../Forms/InputAvatar";
import InputSelectComponent from "../Forms/InputSelect";
import LoaderSun from "../common/Loader/LoaderSun";

const PopoverResponsaveis = ({
  cargoUsuario,
  idColeta,
  openState,
  defaultValues,
  cargoSelected,
  statusColeta,
  ordemDesejada,
  idLoja,
  reListarDadosKanban,
}: any) => {
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [cargos, setCargos] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState<any>(defaultValues);
  const [selectedRole, setSelectedRole] = useState<any>(cargoSelected);
  const { isMobile } = useScreenContext();
  const { listarDadosKanban } = useKanbanContext();
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();

  useEffect(() => {
    setLoading(true);
    listarTodosCargos().then((res) => {
      setCargos(res);

      listarUsuarios(session.id_loja_usuario).then((usuarios) => {
        const perfilFiltrado = usuarios?.filter(
          (usuario: any) =>
            usuario.status_usuario == 1 &&
            (perfil.id_perfil == "1000"
              ? true
              : usuario.perfil_usuario != "1000") &&
            usuario?.loja_usuario?.split(",")?.includes(idLoja) &&
            (selectedRole == "Administrativo" ||
              usuario.cargo_perfil ===
                res.find((cargo: any) => cargo.nome_cargo == selectedRole)
                  ?.id_cargo ||
              (selectedRole == "Vendedor" &&
                (usuario.cargo_perfil == 2 ||
                  usuario.comissionado_usuario == "1") &&
                usuario.cargo_perfil != 3)),
        );
        setLoading(false);
        setUsuarios(perfilFiltrado);
      });
    });
  }, [selectedRole]);

  const toggleUserSelection = (role: string, user: any) => {
    setSelectedUsers((prevSelectedUsers: any) => {
      const newSelectedUsers = { ...prevSelectedUsers };
      if (newSelectedUsers[role]?.id_usuario === user.id_usuario) {
        if (
          role != "Administrativo" &&
          role != "Vendedor" &&
          role != "Gerente"
        ) {
          newSelectedUsers[role] = null;
        }
      } else {
        newSelectedUsers[role] = user;
      }
      return newSelectedUsers;
    });
  };

  const trocaResponsavel = () => {
    const data: any = {
      id_coleta: idColeta,
      administrativo_coleta:
        selectedUsers["Administrativo"]?.id_usuario || null,
      vendedor_coleta: selectedUsers["Vendedor"]?.id_usuario || null,
      tecnico_coleta: selectedUsers["Técnico"]?.id_usuario || null,
      preVendedor_coleta: selectedUsers["Pré-Vendedor"]?.id_usuario || null,
      gerente_coleta: selectedUsers["Gerente"]?.id_usuario || null,
      supervisor_coleta: selectedUsers["Supervisor"]?.id_usuario || null,
      responsavelInstalador_coleta:
        selectedUsers["Instalador"]?.id_usuario || null,
      id_usuario: session.id_usuario,
    };
    setIsLoading(true);
    alterarResponsavel(data)
      .then(() => {
        reListarDadosKanban();
        // listarDadosKanban();
        openState(false);
      })
      .finally(() => setIsLoading(false));
  };
 
  return (
    <Fragment>
      <div className="h-full max-sm:text-xs dark:text-white p-1">
        {statusColeta == 91 && (
          <InputSelectComponent
            label="Cargo"
            placeholder="Selecione um cargo"
            skipEffect
            onChange={(value: any) => {
              setSelectedRole(value.value);
            }}
            options={cargos.map((usuario) => ({
              value: usuario.id_cargo,
              label: usuario.nome_cargo,
            }))}
            defaultValue={cargoSelected}
          />
        )}

        <div className="bg-black-2/5 dark:bg-white/10 p-2 rounded">
          {ordemDesejada.map((tipoResponsavel: string, index: number) => (
            <div className="flex flex-row gap-2" key={index}>
              <div>
                {tipoResponsavel}:{" "}
                {selectedUsers[tipoResponsavel]?.nome_usuario || "Não definido"}
              </div>
              {selectedUsers[tipoResponsavel]?.nome_usuario &&
                tipoResponsavel != "Administrativo" &&
                tipoResponsavel != "Vendedor" &&
                tipoResponsavel != "Gerente" && (
                  <div className="flex flex-col justify-center text-white">
                    <button
                      type="button"
                      className="bg-error rounded-full p-[1px]"
                      onClick={() => {
                        toggleUserSelection(
                          tipoResponsavel,
                          selectedUsers[tipoResponsavel],
                        );
                      }}
                    >
                      <X size={15} />
                    </button>
                  </div>
                )}
            </div>
          ))}
        </div>

        <div className="relative overflow-y-auto max-h-[60vh] h-[300px]">
          <ul
            className={`overflow-y-auto ${loading && "flex w-full place-content-center"}`}
          >
            {loading ? (
              <div className="flex justify-center w-26">
                <LoaderSun />
              </div>
            ) : usuarios?.length > 0 ? (
              usuarios.map((usuario) => {
                const role = selectedRole;
                const isSelected =
                  selectedUsers[role]?.id_usuario === usuario.id_usuario;
                return (
                  <li
                    className={`py-2 flex font-medium items-center gap-2 p-1 m-1 rounded-sm cursor-pointer ${
                      isSelected
                        ? "bg-[#c7def3] hover:bg-[#71aee3]"
                        : "hover:bg-stroke dark:hover:bg-form-strokedark"
                    }`}
                    key={usuario.id_usuario}
                    onClick={() => toggleUserSelection(role, usuario)}
                  >
                    <input
                      type="checkbox"
                      className="hidden"
                      checked={isSelected}
                      onChange={() => toggleUserSelection(role, usuario)}
                    />
                    <AvatarInput
                      nome_responsavel={usuario.nome_usuario}
                      height={isMobile ? "9" : "12"}
                      width={isMobile ? "9" : "12"}
                      imageValue={usuario.avatar_usuario}
                    />
                    <div className="grid">
                      {usuario.nome_usuario}
                      <span className="font-normal">
                        {usuario.email_usuario}
                      </span>
                    </div>
                  </li>
                );
              })
            ) : (
              <div className="w-full h-36 justify-center items-center flex font-semibold">
                Não há usuários para esta categoria
              </div>
            )}
          </ul>
        </div>
        <footer className="h-full sticky bottom-0 right-0 dark:bg-black bg-transparent w-full flex justify-end p-2">
          <Button
            loading={isLoading}
            type="button"
            className="px-7 max-sm:text-xs text-sm bg-primary"
            onClick={trocaResponsavel}
          >
            Trocar
          </Button>
        </footer>
      </div>
    </Fragment>
  );
};

export default PopoverResponsaveis;