import Input from "../input";
import { TPlanName } from "@/types";
import SubmitBtn from "../submit-btn";
import { ChangeEvent } from "react";
import { generateRut } from "@/utils/helpers";
import { cn } from "clsx-tailwind-merge";
import usePlanContactForm from "@/hooks/usePlanContactForm";
import ComunaSelect from "../comuna-select";
import { AnimatePresence } from "framer-motion";
import FormErrorMessage from "../form-error-message";

type PlanContactFormFormProps = {
  currentPlanName: TPlanName;
};

const PlanContactFormForm = ({ currentPlanName }: PlanContactFormFormProps) => {
  const { isSendingForm, register, handleSubmit, onSubmit, setValue, errors, control, formError } =
    usePlanContactForm(currentPlanName);
  return (
    <>
      <form
        className={`${cn("mt-2 mb-6 md:my-2 grid md:grid-cols-2 gap-x-5", {
          "opacity-30 pointer-events-none": isSendingForm,
        })}`}
        onSubmit={handleSubmit(onSubmit)}
        noValidate
      >
        <Input
          label="Nombre"
          attr={{ placeholder: "Ej: Juan" }}
          name="nombre"
          register={register}
          errors={errors}
          className="mb-7"
        />
        <Input
          label="Apellidos"
          attr={{ placeholder: "Ej: Perez García" }}
          name="apellido"
          register={register}
          errors={errors}
          className="mb-7"
        />
        <Input
          label="RUN"
          attr={{ placeholder: "Ej: 12345678-4" }}
          name="run"
          register={register}
          errors={errors}
          className="mb-7"
          registerOptions={{
            onChange: (e: ChangeEvent<HTMLInputElement>) => {
              setValue("run", generateRut(e.target.value), { shouldValidate: true });
            },
          }}
        />
        <Input
          label="Teléfono"
          attr={{ placeholder: "Ej: 987654321" }}
          name="telefono"
          register={register}
          errors={errors}
          className="mb-7"
          disabled={true}
        />
        <Input
          label="Correo electrónico"
          attr={{ placeholder: "Ej: ejemplo@mail.cl", type: "email" }}
          name="correo_electronico"
          register={register}
          errors={errors}
          className="mb-7"
        />
        {(currentPlanName === "Vial365Base" || currentPlanName === "Vial365Plus") && (
          <Input
            label="Placa patente"
            attr={{ placeholder: "Ej: AA1122" }}
            name="placa_patente"
            register={register}
            errors={errors}
            className="mb-7"
          />
        )}

        {currentPlanName === "Medi365" && (
          <>
            <Input
              label="Fecha de nacimiento"
              attr={{ placeholder: "Ej: 10/10/1970", type: "date" }}
              name="fecha_nacimiento"
              register={register}
              errors={errors}
              className="mb-7"
            />
            <Input label="Género" name="genero" register={register} errors={errors}>
              <div className="flex gap-3">
                {["Masculino", "Femenino"].map((radio) => (
                  <label key={radio} className="flex items-center gap-1">
                    {radio}
                    <input type="radio" className="hidden peer" {...register("genero")} value={radio.charAt(0)} />
                    <span
                      className="w-4 h-4 rounded-full bg-white border text-light-blue border-current block before:content-[''] before:w-[65%] before:h-[65%] before:absolute before:bg-inherit before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:rounded-full before:-translate-y-1/2 relative peer-checked:before:bg-light-blue cursor-pointer"
                      tabIndex={0}
                    />
                  </label>
                ))}
              </div>
            </Input>
          </>
        )}
        {currentPlanName === "Hogar365" && (
          <>
            <Input
              label="Dirección"
              attr={{ placeholder: "Ej: Av. Apoquindo 4499, Depto. 701" }}
              name="domicilio"
              register={register}
              errors={errors}
              className="mb-7"
            />
            <ComunaSelect register={register} errors={errors} control={control} setValue={setValue} />
          </>
        )}
        <SubmitBtn
          className="col-span-full mt-2 md:max-w-[8.75rem] ml-0"
          text="Contratar"
          isSendingForm={isSendingForm}
        />
      </form>
      <AnimatePresence>{formError && <FormErrorMessage message={formError} />}</AnimatePresence>
    </>
  );
};

export default PlanContactFormForm;