"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,
    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 md:grid-cols-[repeat(3,minmax(0,21.5625rem))] justify-between gap-7">
                <Select
                  label="Plan"
                  options={planOptions}
                  placeholder="Seleccioná un plan"
                  value={form.plan}
                  onChange={(v) => updateField("plan", v)}
                />

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

                <Select
                  label="Ubicación"
                  options={locationOptions}
                  placeholder="Seleccioná una localidad"
                  value={form.localidad}
                  onChange={(v) => updateField("localidad", v)}
                  search
                />
              </div>

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

export default CartillaForm;