"use client";

import { fadeInOut } from "@/lib/variants";
import { Rubro } from "@/store/cartilla-store";
import { AnimatePresence, motion } from "motion/react";
import { Button, NoResultsMessage, Select } from "@/components/ui";
import { CartillaFormSkeleton } from "@/components/cartilla/";
import useCartilla from "@/components/cartilla/hooks/useCartilla";
import { QueryObserverResult } from "@tanstack/react-query";
import { TypeCartillaResults } from "@/components/cartilla/types";

type CartillaFormProps = {
  rubro: Rubro;
  loadingResults: boolean;
  refetchResults: () => Promise<QueryObserverResult<TypeCartillaResults>>;
};

const CartillaForm = ({ rubro, loadingResults, refetchResults }: CartillaFormProps) => {
  const {
    form,
    data,
    isLoading,
    error,
    noData,
    planOptions,
    specialtyOptions,
    locationOptions,
    zonaLabel,
    zonaOptions,
    isSubmitDisabled,
    updateField,
    submitHandler,
  } = useCartilla(rubro.value);
  return (
    <section className="pt-6 md:pt-12 relative z-11">
      <AnimatePresence mode="wait">
        <motion.div
          key={rubro.label}
          className="contigo-container"
          variants={fadeInOut()}
          initial="initial"
          animate="animate"
          exit="exit"
        >
          <h2 className="text-[1.4375rem] lg:text-4xl font-medium text-center">{rubro.label}</h2>

          {isLoading && <CartillaFormSkeleton />}
          {error && <p className="text-center mt-6 text-red-500">Error obteniendo datos de la cartilla</p>}

          {!isLoading && !error && noData && (
            <NoResultsMessage message="No encontramos resultados para este rubro en este momento." />
          )}

          {!noData && data && (
            <form
              onSubmit={(e) => {
                submitHandler(e);
                refetchResults();
              }}
            >
              <div className="my-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-between gap-7">
                <Select
                  label="Plan"
                  options={planOptions}
                  placeholder="Seleccioná un plan"
                  value={form.plan}
                  onChange={(v) => updateField("plan", v)}
                  search
                />

                <Select
                  label="Especialidad"
                  options={specialtyOptions}
                  placeholder="Seleccioná una especialidad"
                  value={form.especialidad}
                  onChange={(v) => updateField("especialidad", v)}
                  search
                />

                <Select
                  label={zonaLabel}
                  options={zonaOptions}
                  placeholder={zonaLabel === "Provincia" ? "Seleccioná una provincia" : "Seleccioná una zona"}
                  value={form.zona}
                  onChange={(v) => updateField("zona", v)}
                  search
                />

                <Select
                  label={
                    <>
                      Ubicación <span className="text-sm font-normal text-gray-400">Opcional</span>
                    </>
                  }
                  options={locationOptions}
                  placeholder="Seleccioná una localidad"
                  value={form.localidad}
                  onChange={(v) => updateField("localidad", v)}
                  search
                  clearable
                />
              </div>

              <Button type="submit" className="mx-auto" disabled={isSubmitDisabled} loading={loadingResults}>
                Buscar
              </Button>
            </form>
          )}
        </motion.div>
      </AnimatePresence>
    </section>
  );
};

export default CartillaForm;