import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import { getDepositos, getStock } from "../../../api";
import {
    Btn1,
    InputText,
    useProductosStore,
    useSucursalesStore,
} from "../../../index";
import { useGlobalStore } from "../../../store/GlobalStore";
import { v } from "../../../styles/variables";
import { useAjustarStockMutation } from "../../../tanstack/InventarioStack";
import { useBuscarProductosQuery } from "../../../tanstack/ProductosStack";
import { useMostrarSucursalesQuery } from "../../../tanstack/SucursalesStack";
import { BtnClose } from "../../ui/buttons/BtnClose";
import { BuscadorList } from "../../ui/lists/BuscadorList";
import { SelectList } from "../../ui/lists/SelectList";
import { MessageComponent } from "../../ui/messages/MessageComponent";
import { RadioChecks } from "../../ui/toggles/RadioChecks";

export function RegistrarInventario() {
  const { setStateClose } = useGlobalStore();
  const [tipo, setTipo] = useState("ingreso");
  const [depositoSelect, setDepositoSelect] = useState(null);

  const {
    selectProductos,
    setBuscador,
    productosItemSelect,
    dataProductos,
    resetProductosItemSelect,
  } = useProductosStore();

  const {
    register,
    formState: { errors },
    handleSubmit,
    reset,
  } = useForm({
    defaultValues: {
      cantidad: "",
      observaciones: "",
    },
  });

  useEffect(() => {
    if (productosItemSelect) {
      reset({ cantidad: "", observaciones: "" });
    }
  }, [productosItemSelect, reset]);

  useBuscarProductosQuery();
  const { selectSucursal, sucursalesItemSelect } = useSucursalesStore();

  const { data: dataSucursales, isLoading: isLoadingSucursal } =
    useMostrarSucursalesQuery();

  const { data: dataDepositos, isLoading: isLoadingDepositos } = useQuery({
    queryKey: ["depositos", sucursalesItemSelect?.id],
    queryFn: () => getDepositos(sucursalesItemSelect?.id),
    enabled: !!sucursalesItemSelect?.id,
  });

  const { data: dataStock } = useQuery({
    queryKey: ["stock", depositoSelect?.id, productosItemSelect?.id],
    queryFn: () => getStock(depositoSelect?.id, productosItemSelect?.id),
    enabled: !!depositoSelect?.id && !!productosItemSelect?.id,
  });

  const { mutate, isPending } = useAjustarStockMutation();

  const onSubmit = (data) => {
    const cantidad = tipo === "ingreso" ? Number(data.cantidad) : -Number(data.cantidad);
    mutate({
      deposito_id: depositoSelect.id,
      producto_id: productosItemSelect.id,
      cantidad,
      observaciones: data.observaciones,
    });
    reset();
    setStateClose(false);
  };

  const isLoading = isLoadingSucursal || isLoadingDepositos;

  if (isLoading) {
    return <span>Cargando...</span>;
  }

  return (
    <Container>
      {isPending ? (
        <span>Guardando...🔼</span>
      ) : (
        <div className="sub-contenedor">
          <RadioChecks tipo={tipo} setTipo={setTipo} />
          <div className="headers">
            <section>
              <h1>
                {tipo === "ingreso" ? "REGISTRAR ENTRADA" : "REGISTRAR SALIDA"}
              </h1>
            </section>
            <section>
              <BtnClose
                funcion={() => {
                  resetProductosItemSelect();
                  setStateClose(false);
                }}
              />
            </section>
          </div>
          <section className="containerListas">
            <BuscadorList
              data={dataProductos}
              onSelect={selectProductos}
              setBuscador={setBuscador}
            />
            <span>
              Producto:{" "}
              <strong>
                {productosItemSelect?.descripcion || productosItemSelect?.nombre || "-"}
              </strong>
            </span>
            <span>
              Stock Disponible:{" "}
              <strong>
                {dataStock?.cantidad_disponible !== undefined
                  ? Number(dataStock.cantidad_disponible)
                  : "-"}
              </strong>
              {dataStock?.cantidad_reservada > 0 && (
                <small> (Reservado: {Number(dataStock.cantidad_reservada)})</small>
              )}
            </span>

            <ContainerSelector>
              <label>Sucursal:</label>
              <SelectList
                data={dataSucursales}
                itemSelect={sucursalesItemSelect}
                onSelect={(item) => {
                  selectSucursal(item);
                  setDepositoSelect(null);
                }}
                displayField="nombre"
              />
            </ContainerSelector>
            <ContainerSelector>
              <label>Depósito:</label>
              <SelectList
                data={dataDepositos || []}
                itemSelect={depositoSelect}
                onSelect={setDepositoSelect}
                displayField="descripcion"
              />
            </ContainerSelector>
          </section>
          {productosItemSelect?.maneja_inventario !== false ? (
            <form className="formulario" onSubmit={handleSubmit(onSubmit)}>
              <section className="form-subcontainer">
                <article>
                  <InputText icono={<v.iconoflechaderecha />}>
                    <input
                      className="form__field"
                      type="number"
                      step="0.01"
                      {...register("cantidad", { required: true, min: 0.01 })}
                    />
                    <label className="form__label">Cantidad</label>
                    {errors.cantidad?.type === "required" && (
                      <p>Campo requerido</p>
                    )}
                  </InputText>
                </article>
                <article>
                  <InputText icono={<v.iconoflechaderecha />}>
                    <input
                      className="form__field"
                      type="text"
                      {...register("observaciones")}
                    />
                    <label className="form__label">Observaciones</label>
                  </InputText>
                </article>

                <Btn1
                  disabled={!productosItemSelect?.id || !depositoSelect?.id}
                  icono={<v.iconoguardar />}
                  titulo="Guardar"
                  bgcolor="#F9D70B"
                />
              </section>
            </form>
          ) : (
            <MessageComponent
              text={
                productosItemSelect?.id
                  ? "Este producto no maneja inventario, diríjase a configuración > productos y realice el cambio"
                  : "Busque un producto"
              }
            />
          )}
        </div>
      )}
    </Container>
  );
}
const Container = styled.div`
  transition: 0.5s;
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  .sub-contenedor {
    position: relative;
    width: 500px;
    max-width: 85%;
    border-radius: 20px;
    background: ${({ theme }) => theme.body};
    box-shadow: -10px 15px 30px rgba(10, 9, 9, 0.4);
    padding: 13px 36px 20px 36px;
    z-index: 100;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .containerListas {
      gap: 20px;
      display: flex;
      flex-direction: column;
    }
    .contentSucursal {
      display: flex;
      gap: 10px;
    }
    .headers {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h1 {
        font-size: 30px;
        font-weight: 700;
        text-transform: uppercase;
      }
      span {
        font-size: 20px;
        cursor: pointer;
      }
    }
    .formulario {
      .form-subcontainer {
        gap: 20px;
        display: flex;
        flex-direction: column;
        .colorContainer {
          .colorPickerContent {
            padding-top: 15px;
            min-height: 50px;
          }
        }
      }
    }
  }
`;

export const ContainerSelector = styled.div`
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
`;