import { Add, Search } from "@mui/icons-material";
import { Box, Button, InputAdornment, TextField } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import ConfettiExplosion from "react-confetti-explosion";
import { usePermission } from "../../hooks/usePermission";
import { useClientesProveedoresStore } from "../../store/ClientesProveedoresStore";
import { useEmpresaStore } from "../../store/EmpresaStore";
import { RegistrarClientesProveedores } from "../organismos/formularios/RegistrarClientesProveedores";
import { TablaClientesProveedores } from "../organismos/tablas/TablaClientesProveedores";

export function ClientesTab() {
  const [openRegistro, setOpenRegistro] = useState(false);
  const [accion, setAccion] = useState("");
  const [dataSelect, setDataSelect] = useState([]);
  const [isExploding, setIsExploding] = useState(false);

  const { dataempresa } = useEmpresaStore();
  const ventasPerm = usePermission("VENTAS");
  const canCreate = ventasPerm.can("VEN_CLI_CLIENTE_CREAR");
  const canEdit = ventasPerm.can("VEN_CLI_CLIENTE_EDITAR");
  const canDelete = ventasPerm.can("VEN_CLI_CLIENTE_ELIMINAR");
  const {
    dataclipro,
    mostrarCliPro,
    buscarCliPro,
    setBuscador,
    buscador,
    setTipo,
  } = useClientesProveedoresStore();

  useQuery({
    queryKey: [
      "mostrar clientes",
      { dataempresa: dataempresa?.id, tipo: "cliente" },
    ],
    queryFn: () =>
      mostrarCliPro({ id_empresa: dataempresa?.id, tipo: "cliente" }),
    enabled: !!dataempresa,
    refetchOnWindowFocus: false,
  });

  useQuery({
    queryKey: [
      "buscar clientes",
      { dataempresa: dataempresa?.id, tipo: "cliente", buscador },
    ],
    queryFn: () =>
      buscarCliPro({ id_empresa: dataempresa?.id, tipo: "cliente", buscador }),
    enabled: !!dataempresa && !!buscador,
    refetchOnWindowFocus: false,
  });

  const handleNuevoRegistro = () => {
    setTipo("cliente");
    setOpenRegistro(true);
    setAccion("Nuevo");
    setDataSelect([]);
    setIsExploding(false);
  };

  return (
    <Box>
      {openRegistro && (
        <RegistrarClientesProveedores
          setIsExploding={setIsExploding}
          onClose={() => setOpenRegistro(false)}
          dataSelect={dataSelect}
          accion={accion}
        />
      )}

      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 2,
          gap: 2,
          flexWrap: "wrap",
        }}
      >
        <TextField
          size="small"
          placeholder="Buscar cliente..."
          value={buscador}
          onChange={(e) => setBuscador(e.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Search />
              </InputAdornment>
            ),
          }}
          sx={{ minWidth: 250 }}
        />
        {canCreate && (
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={handleNuevoRegistro}
          >
            Nuevo Cliente
          </Button>
        )}
      </Box>

      {isExploding && <ConfettiExplosion />}

      <TablaClientesProveedores
        setdataSelect={setDataSelect}
        setAccion={setAccion}
        SetopenRegistro={setOpenRegistro}
        data={dataclipro}
        canEdit={canEdit}
        canDelete={canDelete}
      />
    </Box>
  );
}