import Button from "@/components/Forms/Button";
import ConsultaIndicadores from "@/pages/Indicadores/ConsultaIndicadores";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useState } from "react";

export default function IndicadorSelector({
  // usuarios,
  defaultValues,
  handleSave,
  indicatorButtonLoading,
  selectedIndicador,
  setSelectedIndicador,
}: any) {
  // const [indicadoresFiltrados, setIndicadoresFiltrados] = useState<any[]>([]);
  const [indicadoresFilter, setIndicadoresFilter] = useState<any>({});

  const { isMobile } = useScreenContext();

  return (
    <section>
      <ConsultaIndicadores
        defaultValues={{ ...defaultValues, selectedIndicador }}
        disabledFilters={["codUsuario_indicador", "codOrigem_indicador"]}
        setSelectedIndicador={setSelectedIndicador}
      />
      <div className="fixed bottom-0 right-0 p-4 w-full bg-white flex justify-end items-center">
        <Button
          onClick={handleSave}
          isLoading={indicatorButtonLoading}
          disabled={!selectedIndicador}
          className={`px-4 py-2 rounded-lg font-semibold text-white
              ${selectedIndicador ? "bg-success hover:bg-secondaryMenu" : "bg-bodydark2 cursor-not-allowed"}`}
        >
          Salvar Seleção
        </Button>
      </div>
    </section>
  );
  // return isLoadingIndicadores ? (
  //   <div className="flex flex-col justify-center items-center w-full h-40">
  //     <LoaderSun />
  //   </div>
  // ) : (
  //   <section>
  //     <div className="flex justify-center items-center mb-4 flex-col">
  //       <div className="flex flex-row flex-wrap gap-4">
  //         {/* <InputSelectComponent
  //           name="vendedor"
  //           label={"Vendedor responsável"}
  //           options={usuarios?.map((u: any) => ({
  //             label: u?.nome_usuario,
  //             value: u?.id_usuario,
  //           }))}
  //           width="w-fit"
  //           onChange={(e: any) => {
  //             setIndicadoresFilter((prev: any) => ({
  //               ...prev,
  //               codUsuario_indicador: e?.value,
  //             }));
  //           }}
  //         /> */}
  //         <div className="p-2">
  //           <div>Período</div>
  //           <div className="flex flex-row flex-wrap gap-4">
  //             <Input
  //               name="inicio"
  //               label="Início"
  //               type="date"
  //               width="flex-1"
  //               onChange={(e: any) => {
  //                 setIndicadoresFilter((prev: any) => ({
  //                   ...prev,
  //                   dataI_criacao_indicador: e.target.value,
  //                 }));
  //               }}
  //             />
  //             <Input
  //               name="fim"
  //               label="Fim"
  //               type="date"
  //               width="flex-1"
  //               onChange={(e: any) => {
  //                 setIndicadoresFilter((prev: any) => ({
  //                   ...prev,
  //                   dataF_criacao_indicador: e.target.value,
  //                 }));
  //               }}
  //             />
  //           </div>
  //         </div>
  //       </div>
  //       <input
  //         type="text"
  //         placeholder="Buscar indicador"
  //         className="border border-gray-300 rounded-lg p-2 w-50"
  //         onChange={(e) => {
  //           const value = e.target.value;
  //           setIndicadoresFilter((prev: any) => ({
  //             ...prev,
  //             nome_indicador: e.target.value,
  //           }));
  //           // const filteredIndicadores = indicadores.filter((indicador: any) =>
  //           //   indicador.nome_indicador
  //           //     .toLowerCase()
  //           //     .includes(value.toLowerCase()),
  //           // );
  //           // setIndicadoresFiltrados(filteredIndicadores);
  //         }}
  //       />
  //     </div>

  //     <div className="max-h-115 mb-16">
  //       <div
  //         className={`${isMobile ? "grid grid-cols-1" : "grid grid-cols-3"} gap-4`}
  //       >
  //         {indicadores
  //           .filter(
  //             (i: any) =>
  //               (indicadoresFilter?.nome_indicador
  //                 ? i?.nome_indicador
  //                     ?.toLowerCase()
  //                     ?.includes(
  //                       indicadoresFilter?.nome_indicador?.toLowerCase(),
  //                     )
  //                 : true) &&
  //               (indicadoresFilter?.dataI_criacao_indicador
  //                 ? getDateTimeBrasil(
  //                     undefined,
  //                     indicadoresFilter?.dataI_criacao_indicador,
  //                   ) <= getDateTimeBrasil(undefined, i.data_criacao_indicador)
  //                 : true) &&
  //               (indicadoresFilter?.dataF_criacao_indicador
  //                 ? getDateTimeBrasil(
  //                     undefined,
  //                     indicadoresFilter?.dataF_criacao_indicador,
  //                   ) >= getDateTimeBrasil(undefined, i.data_criacao_indicador)
  //                 : true),
  //             // (indicadoresFilter?.codUsuario_indicador
  //             //   ? indicadoresFilter?.codUsuario_indicador ==
  //             //     i?.codUsuario_indicador
  //             //   : true),
  //           )
  //           .map((indicador: any) => (
  //             <div
  //               key={indicador.id_indicador}
  //               onClick={() => setSelectedIndicador(indicador)}
  //               className={`flex flex-col p-4 border rounded-lg shadow-sm cursor-pointer transition duration-150 hover:scale-[102%] hover:shadow-lg  ${
  //                 selectedIndicador?.id_indicador == indicador.id_indicador
  //                   ? "border-success"
  //                   : ""
  //               }`}
  //             >
  //               <div className="text-lg font-semibold">
  //                 Nome:{" "}
  //                 <span className="font-normal">
  //                   {indicador.nome_indicador}
  //                 </span>
  //               </div>
  //               <div className="text-lg font-semibold mt-2">
  //                 CPF/CNPJ:{" "}
  //                 <span className="font-normal">
  //                   {indicador.cpfCnpj_indicador}
  //                 </span>
  //               </div>
  //               <div className="text-lg font-semibold mt-2">
  //                 Telefone:{" "}
  //                 <span className="font-normal">
  //                   {indicador.telefone_indicador}
  //                 </span>
  //               </div>
  //               <div className="text-lg font-semibold mt-2">
  //                 Email:{" "}
  //                 <span className="font-normal">
  //                   {indicador.email_indicador}
  //                 </span>
  //               </div>
  //               <div className="text-lg font-semibold mt-2">
  //                 Cadastro:{" "}
  //                 <span className="font-normal">
  //                   {getDateBrasil(undefined, indicador.data_criacao_indicador)}
  //                 </span>
  //               </div>
  //             </div>
  //           ))}
  //       </div>
  //     </div>

  //     <div className="fixed bottom-0 right-0 p-4 w-full bg-white flex justify-end items-center">
  //       <Button
  //         onClick={handleSave}
  //         isLoading={indicatorButtonLoading}
  //         disabled={!selectedIndicador}
  //         className={`px-4 py-2 rounded-lg font-semibold text-white
  //           ${selectedIndicador ? "bg-success hover:bg-secondaryMenu" : "bg-bodydark2 cursor-not-allowed"}`}
  //       >
  //         Salvar Seleção
  //       </Button>
  //     </div>
  //   </section>
  // );
}