import { Form, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { createElement, useEffect } from "react";
import clsx from "clsx";
import { z } from "zod";

const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";

const schema = z.object({
  name: z.string().nonempty({ message: "Deve preencher o nome" }),
  email: z
    .string()
    .nonempty({ message: "Deve preencher o email" })
    .email({ message: "Deve ser um email válido" }),
  telephone: z.string().nonempty({ message: "Deve preencher o telefone" }),
  orgname: z.string().nonempty({ message: "Deve preencher a empresa" }),
  message: z.string().nonempty({ message: "Deve preencher a mensagem" }),
});

export default function Contact({ url }) {
  const { register, formState, control, reset } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <Form
      action={N8N_URL}
      onSubmit={(data) => {
        return { url, ...data };
      }}
      onSuccess={() => reset()}
      control={control}
      className="flex flex-col gap-3"
    >
      {formState.isSubmitSuccessful && (
        <p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
          Sua mensagem foi enviada com sucesso.
        </p>
      )}

      <Control>
        <Input
          aria-invalid={!!formState.errors?.name}
          placeholder="Digite seu nome"
          {...register("name")}
        />
        <Error>{formState.errors.name?.message}</Error>
      </Control>

      <Control>
        <Input
          aria-invalid={!!formState.errors?.name}
          placeholder="Email corporativo"
          {...register("email")}
        />
        <Error>{formState.errors.email?.message}</Error>
      </Control>

      <Control>
        <Input
          aria-invalid={!!formState.errors?.name}
          placeholder="Telefone"
          {...register("telephone")}
        />
        <Error>{formState.errors.telephone?.message}</Error>
      </Control>

      <Control>
        <Input
          aria-invalid={!!formState.errors?.name}
          placeholder="Empresa"
          {...register("orgname")}
        />
        <Error>{formState.errors.orgname?.message}</Error>
      </Control>

      <Control>
        <Input
          as="textarea"
          className="h-28"
          placeholder="Mensagem"
          aria-invalid={!!formState.errors?.message}
          {...register("message")}
        />
        <Error>{formState.errors.message?.message}</Error>
      </Control>

      <button
        type="submit"
        className="p-2.5 border border-lime-400 rounded-lg cursor-pointer"
      >
        Enviar
      </button>
    </Form>
  );
}

export function Input({ as = "input", className, ...props }) {
  return createElement(as, {
    className: clsx(
      "bg-white/5 focus:bg-white/15 rounded-lg p-3 w-full border border-white/10 focus:border-lime-400 focus:outline-0 transition",
      "placeholder-white/70",
      "aria-invalid:border-red-600",
      className,
    ),
    ...props,
  });
}

function Control({ children, className }) {
  return <label className={className}>{children}</label>;
}

function Error({ children, className }) {
  if (children) {
    return (
      <p className={clsx("text-sm text-red-400", className)}>{children}</p>
    );
  }

  return null;
}