import Button from "@/components/Forms/Button";

import Input from "@/components/Forms/Input";
import {
  listarFunisUsuario,
  listarUsuarioPeloId,
  listarUsuarios,
} from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import * as yup from "yup";

import AvatarInput from "@/components/Forms/InputAvatar";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { Skeleton } from "@/components/ui/skeleton";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { alterarInformacoesUsuario } from "@/requests/CRUD/Usuario/editarUsuario";
import { criarNovaSenha } from "@/requests/common/Login/login";
import { X } from "lucide-react";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";

const Perfil = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const { handleSubmit: formHandleSubmit, ...form } = GetForm();

  const [formImage, setFormImage] = useState<any>();
  const [fotoProposta, setFotoProposta] = useState<any>();

  const [passwordYupScheme, setPasswordYupScheme] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit: passwordHandleSubmit, ...validatePass } = GetForm(
    passwordYupScheme,
    setPasswordYupScheme,
  );

  const { valuesSession, updateSession, perfil } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const siglaCliente = session.sigla;
  const guardarEmail = session.email_usuario;
  const perfil_usuario = session.perfil_usuario;
  const perfilAdm = perfil_usuario == 1000 ? true : false;
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [dadosUsuario, setDadosUsuario] = useState<any>({});
  const [funis, setFunis] = useState<any>([]);
  const [lojas, setLojas] = useState<any>([]);

  const handleChangeUserPass = (data: FieldValues) => {
    data["email"] = guardarEmail;
    data["sigla"] = siglaCliente;
    data["profileChangePass"] = true;
    setIsLoading(true);
    criarNovaSenha(data);
    setIsLoading(false);
  };

  const handleChangeForm = (data: FieldValues) => {
    if (formImage) {
      data["avatar_usuario"] = formImage;
    }
    if (fotoProposta) {
      data["foto_proposta_usuario"] = fotoProposta;
    }
    data["id_usuario"] = id_usuario;

    const newFormData = new FormData();

    for (const key in data) {
      newFormData.append(key, data[key]);
    }

    alterarInformacoesUsuario(newFormData).then(async () => {
      updateSession({
        nome_usuario: data.nome_usuario ?? session.nome_usuario,
        funil_favorito_usuario:
          data.funil_favorito_usuario ?? session.funil_favorito_usuario,
        email_usuario: data.email_usuario ?? session.email_usuario,
        telefone1_usuario: data.telefone1_usuario ?? session.telefone1_usuario,
        login_usuario: data.login_usuario ?? session.login_usuario,
        loja_padrao_usuario:
          data.loja_padrao_usuario ?? session.loja_padrao_usuario,
      });
    });

    const usuarioAtualizado = JSON.parse(
      localStorage.getItem("usuario") || "{}",
    );
    usuarioAtualizado.funil_favorito = data.funil_favorito;

    localStorage.setItem("usuario", JSON.stringify(usuarioAtualizado));

    listarUsuarios(session.id_loja_usuario);
  };

  useEffect(() => {
    setIsLoaded(true);
    Promise.all([
      listarUsuarioPeloId(id_usuario),
      listarFunisUsuario(perfil_usuario),
      listarLojas(),
    ])
      .then(([usuarios, funis, lojas]) => {
        setDadosUsuario(usuarios);
        listarLojas().then((res) => {
          const idsLojaUsuario = usuarios.loja_usuario
            ?.split(",")
            .map((id: any) => id.trim());
          const filtered = res.filter((loja: any) =>
            idsLojaUsuario?.includes(loja.id_loja?.toString()),
          );

          setLojas(filtered);
        });
      })
      .finally(() => setIsLoaded(false));
    listarFunisUsuario(perfil_usuario).then((res) => setFunis(res));
  }, [session]);

  return (
    <>
      <div className="mx-auto max-w-270">
        <div className="grid grid-cols-5 gap-8">
          <div className="col-span-5 xl:col-span-3">
            <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
              <div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
                <h3 className="font-medium text-black dark:text-white">
                  Informações Pessoais Do Seu Perfil
                </h3>
              </div>
              <div className="p-5">
                {!isLoaded ? (
                  <form
                    className="flex flex-col gap-2"
                    s
                    onSubmit={formHandleSubmit(handleChangeForm)}
                    {...rest}
                  >
                    <div className="flex flex-col md:flex-row md:gap-x-4 ">
                      <div className="flex flex-col flex-grow gap-3">
                        <Input
                          label="Nome"
                          name="nome_usuario"
                          required
                          error="Preencha o Nome"
                          formulario={form}
                          disabled={!perfilAdm}
                          defaultValue={
                            dadosUsuario && dadosUsuario["nome_usuario"]
                          }
                        />
                        <Input
                          label="Telefone"
                          // className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
                          name="telefone1_usuario"
                          formulario={form}
                          error={"Preencha o Telefone"}
                          required
                          disabled={!perfilAdm}
                          mascara="telefone"
                          defaultValue={dadosUsuario.telefone1_usuario}
                        />
                        <Input
                          label="Email"
                          name="email_usuario"
                          formulario={form}
                          error={"Preencha o Email"}
                          required
                          disabled={!perfilAdm}
                          defaultValue={dadosUsuario.email_usuario}
                        />
                        <Input
                          label="login"
                          name="login_usuario"
                          required
                          error="Preencha o Login"
                          inputClassName="!bg-white"
                          formulario={form}
                          disabled={!perfilAdm}
                          defaultValue={dadosUsuario.login_usuario}
                        />
                      </div>
                      <div className="flex flex-col gap-2">
                        <div className="flex flex-col items-center xl:mt-5">
                          <div>Foto do Sistema</div>
                          <div className="relative">
                            <button
                              type="button"
                              className="absolute right-0 top-0"
                              onClick={() =>
                                setDadosUsuario((prev: any) => ({
                                  ...prev,
                                  avatar_usuario: "",
                                }))
                              }
                            >
                              <X />
                            </button>
                            <AvatarInput
                              hover={false}
                              imageValue={
                                dadosUsuario && dadosUsuario["avatar_usuario"]
                              }
                              viewOnly={false}
                              formImage={setFormImage}
                            />
                          </div>
                        </div>
                        <div className="flex flex-col items-center relative">
                          <div>Foto para Proposta</div>

                          <div className="relative">
                            <button
                              type="button"
                              className="absolute right-0 top-0 z-1"
                              onClick={() =>
                                setDadosUsuario((prev: any) => ({
                                  ...prev,
                                  caminho_foto_proposta_usuario: "",
                                }))
                              }
                            >
                              <X />
                            </button>
                            <AvatarInput
                              hover={false}
                              imageValue={
                                dadosUsuario &&
                                dadosUsuario["caminho_foto_proposta_usuario"]
                              }
                              viewOnly={false}
                              formImage={setFotoProposta}
                            />
                          </div>
                        </div>
                      </div>
                    </div>

                    {funis && funis.length > 0 && (
                      <InputSelectComponent
                        skipEffect
                        formulario={form}
                        name="funil_favorito_usuario"
                        label="Fluxo Favorito"
                        options={funis
                          ?.filter((funil: any) => {
                            return perfil?.permissoes_funis_perfil
                              ?.split("^")
                              ?.includes(String(funil?.id_funil));
                          })
                          ?.map((e: any) => ({
                            value: e.id_funil,
                            label: e.titulo_funil,
                          }))}
                        // options={
                        //   usuarios?.length > 0
                        //     ? [
                        //         { label: "Todos Vendedores", value: "*" },
                        //         ...usuarios.map((usuario: any) => ({
                        //           label: usuario.nome_usuario,
                        //           value: usuario.id_usuario,
                        //         })),
                        //       ]
                        //     : []
                        // }
                        defaultValue={dadosUsuario.funil_favorito_usuario}
                      />
                    )}
                    {lojas && lojas.length > 0 && (
                      <InputSelectComponent
                        skipEffect
                        formulario={form}
                        name="loja_padrao_usuario"
                        label="Loja Padrão"
                        options={lojas.map((e: any) => ({
                          value: e.id_loja,
                          label: e.nome_loja,
                        }))}
                        required
                        error={"Escolha um Perfil"}
                        defaultValue={dadosUsuario.loja_padrao_usuario}
                      />
                    )}

                    <div className="flex justify-end gap-4.5">
                      <Button
                        className="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray text-sm hover:bg-opacity-95"
                        loading={isLoading}
                      >
                        Confirmar
                      </Button>
                    </div>
                  </form>
                ) : (
                  <div className="flex flex-col gap-4">
                    <div className="flex flex-col md:flex-row md:gap-x-4 ">
                      <Skeleton className="flex flex-col flex-grow">
                        <div className="relative">
                          <div className="w-full h-8 rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"></div>
                        </div>
                      </Skeleton>
                      <div className="flex flex-col flex-grow">
                        <div className="w-full h-8 rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"></div>
                      </div>
                    </div>
                    <Skeleton className="flex flex-col md:flex-row md:gap-x-4 mb-6">
                      <div className="flex flex-col flex-grow">
                        <div className="w-full h-8 rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"></div>
                      </div>
                    </Skeleton>
                    <Skeleton className="flex flex-col md:flex-row md:gap-x-4 mb-6">
                      <div className="flex flex-col flex-grow">
                        <div className="w-full h-8 rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"></div>
                      </div>
                    </Skeleton>
                    <Skeleton>
                      <div className="w-full h-8 rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"></div>
                    </Skeleton>
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className="col-span-5 xl:col-span-2">
            <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
              <div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
                <h3 className="font-medium text-black dark:text-white">
                  Alterar Senha
                </h3>
              </div>
              <div className="p-5.5">
                <form
                  className="flex flex-col gap-4"
                  onSubmit={passwordHandleSubmit(handleChangeUserPass)}
                >
                  <div className="mb-5.5">
                    <div className="relative">
                      <Input
                        label="Senha Antiga"
                        name="senha_anterior_usuario"
                        type="password"
                        placeholder="Digite sua senha anterior"
                        isPassword
                        formulario={validatePass}
                        required
                        error="Digite sua senha!"
                      />
                    </div>
                  </div>

                  <div className="mb-5.5">
                    <Input
                      label="Nova Senha"
                      name="senha_usuario"
                      type="password"
                      placeholder="Digite sua nova senha"
                      isPassword
                      formulario={validatePass}
                      required
                      error="Digite sua senha!"
                    />
                  </div>

                  <div className="mb-5.5">
                    <Input
                      label="Confirmar Senha"
                      name="senha_usuario_confirmação"
                      placeholder="Confirme sua nova senha"
                      equals={"senha_usuario"}
                      formulario={validatePass}
                      type="password"
                      isPassword
                      required
                      error="Digite sua senha!"
                    />
                  </div>

                  <div className="flex justify-end gap-4.5">
                    <Button
                      className="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray text-sm hover:bg-opacity-95"
                      loading={isLoading}
                    >
                      Alterar
                    </Button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Perfil;