import Button from "@/components/Forms/Button";
import {
  listarOpcoesBanco,
  listarOpcoesListagem,
} from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";

import { AnimatePresence, motion } from "framer-motion";
import { SetStateAction, useEffect, useState } from "react";
import { KeysSelectTable } from "./FormCamposPersonalizados";
import { ChevronLeft } from "lucide-react";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
interface DatabaseProps {
  setSelectedTable: any;
  selectedTable: any;
  handleGetSelectedBase: any;
}
const DatabaseOptions = ({
  setSelectedTable,
  selectedTable,
  handleGetSelectedBase,
}: DatabaseProps) => {
  const [opcoesListagem, setOpcoesListagem] = useState<KeysSelectTable[]>([]);
  const [tipoItensKit, setTipoItensKit] = useState<any[]>([]);

  useEffect(() => {
    listarTiposItensKit().then((res) => {
      setTipoItensKit(
        res.map((tipo: any) => ({
          label: tipo.nome_tipo_item,
          value: tipo.id_tipo_item,
        }))
      );
    });
    listarOpcoesListagem().then((response) => {
      setOpcoesListagem(
        response.map((opcao: any) => ({
          name: opcao.nome_opcao_listagem,
          db_name: opcao.tabela_opcao_listagem,
        }))
      );
    });
  }, []);
  const opcoesStatus = [
    { name: "Todos", status: "*" },
    { name: "Ativos", status: "1" },
    { name: "Inativos", status: "0" },
  ];
  const opcoesItensKit = [
    { name: "Distribuidor da Proposta", origem: "0" },
    { name: "Todos os Distribuidores", origem: "1" },
  ];
  const [step, setStep] = useState<1 | 2 | 3 | 4>(1);
  const [escolhido, setEscolhido] = useState(false);
  return (
    <div>
      {step === 1 && (
        <>
          <h1>Opções de listagem</h1>
          <div className="flex flex-col">
            {opcoesListagem &&
              opcoesListagem.map((opcao, i) => (
                <span
                  key={i}
                  onClick={() => {
                    setSelectedTable(opcao);
                    if (opcao.name === "Itens do Kit") {
                      setStep(2);
                    } else {
                      setStep(3);
                    }
                  }}
                  className="py-3 cursor-pointer text-black hover:bg-stroke px-2"
                >
                  {opcao.name}
                </span>
              ))}
          </div>
        </>
      )}
      {step === 2 && (
        <div>
          <div
            onClick={() => setStep(1)}
            className="my-4 cursor-pointer flex gap-2 items-center"
          >
            <ChevronLeft size={20} />
            <p className="text-lg">Voltar</p>
          </div>
          <AnimatePresence>
            <motion.div
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.3 }}
              className="w-full h-full  rounded-md no-scrollbar overflow-auto"
            >
              <div className="flex text-center text-lg mb-4 text-black font-medium">
                Selecionar quais itens de {selectedTable?.name}?
              </div>
              <div>
                <InputSelectComponent
                  options={tipoItensKit}
                  label="Selecione"
                  onChange={(e: any) => {
                    setEscolhido(true);
                    setSelectedTable((prev: any) => ({
                      ...prev,
                      item_kit: e.value,
                    }));
                  }}
                />
              </div>
            </motion.div>
          </AnimatePresence>

          <Button
            onClick={() => setStep(3)}
            type="button"
            disabled={!escolhido}
            className="bg-success w-full mt-5 h-11 text-sm justify-self-end"
          >
            Próximo
          </Button>
        </div>
      )}
      {step === 3 && (
        <div>
          <div
            onClick={() =>
              setStep(selectedTable.name === "Itens do Kit" ? 2 : 1)
            }
            className="my-4 cursor-pointer flex gap-2 items-center"
          >
            <ChevronLeft size={20} />
            <p className="text-lg">Voltar</p>
          </div>
          <AnimatePresence>
            <motion.div
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.3 }}
              className="w-full h-full  rounded-md no-scrollbar overflow-auto"
            >
              <div className="flex text-center text-lg mb-4 text-black font-medium">
                Selecionar quais registros de {selectedTable?.name}?
              </div>
              <div className="flex gap-2">
                {opcoesStatus.map((status, i) => (
                  <span
                    key={i}
                    onClick={() => {
                      setSelectedTable((prev: any) => ({
                        ...prev,
                        status: status.status,
                      }));

                    }}
                    className={`hover:border-success ${selectedTable?.status === status.status && "bg-success text-white"} text-sm hover:cursor-pointer p-3 border rounded-[30px] px-9`}
                  >
                    {status.name}
                  </span>
                ))}
              </div>
            </motion.div>
          </AnimatePresence>
          <Button
            onClick={handleGetSelectedBase}
            type="button"
            className="bg-success w-full mt-5 h-11 text-sm justify-self-end"
          >
            Carregar
          </Button>
        </div>
      )}


    </div>
  );
};

export default DatabaseOptions;