import { createSignal } from "solid-js";
import { FormGroup } from "@components/FormGroup";
import Toast from "@utils/toast";
import { ActionError, actions } from "astro:actions";
import { getFormErrors } from "@/utils/errors";

export const ContactForm = () => {
  const [loading, setLoading] = createSignal(false);
  const [errors, setErrors] = createSignal<ActionError>();
  let contact_form: HTMLFormElement;
  const send = async (form: SubmitEvent) => {
    form.preventDefault();
    setLoading(true);
    setErrors();
    try {
      const formData = new FormData(contact_form);
      const name = formData.get("name");

      const { data, error } = await actions.sendMessage(formData);
      if (!error) {
        // @ts-ignore
        contact_form.reset();
        await Toast.fire({
          title: "Recieved",
          text: data?.message,
          html: `
        <strong> Thank your "${name ?? ""}"</strong> 
        <p class='my-2'> We will get back to you within the next 48 hours maximum </p>
        `,
        });
      } else
        await Toast.fire({
          title: "Try Again",
          text: error?.message,
          html: `
        <strong> Sorry "${name ?? ""}"</strong> 
        <p class='my-2'> Kindly Retry by clicking on the submit button </p>
        `,
        });
    } catch (error) {
      await Toast.fire({
        icon: "error",
        title: "Error",
        // @ts-ignore
        text: error.message,
      });
    } finally {
      setLoading(false);
    }
  };
  return (
    <>
      <form
        method="post"
        onSubmit={(form) => send(form)}
        ref={(e) => (contact_form = e)}
        class="flex flex-col gap-3"
      >
        <h4 class="balance text-blue-950 font-semibold text-[1.3rem] !mt-0 md:!mt-4 uppercase tracking-wider">
          Leave Us A Message
        </h4>

        <div class="grid gap-3">
          <FormGroup
            name="name"
            required={true}
            label="Name"
            placeholder={"Full name"}
            error={() => getFormErrors(["name"], errors())}
          />
          <FormGroup
            name="email"
            type="email"
            required={true}
            label="Email"
            placeholder={"user@example.com"}
            error={() => getFormErrors(["email"], errors())}
          />
          <FormGroup
            name="subject"
            required={true}
            label="Subject"
            placeholder={"Enquiry"}
            error={() => getFormErrors(["subject"], errors())}
          />
          <FormGroup
            name="message"
            multiLine={true}
            required={true}
            label="Message"
            placeholder={"Type your message"}
            className="grow"
            error={() => getFormErrors(["message"], errors())}
          />
          {/* <div class="flex flex-col gap-1 w-full">
            <label for="message" class="px-2">
              <small>Message</small>
            </label>
            <textarea
              class="min-h-[10rem]  p-3 rounded-lg border border-blue-900/5 outline-0 max-w-full"
              name="message"
              required={true}
              placeholder={"Type your message"}
              onchange={(e) => setMessage(e.target.value)}
            />
          </div> */}
        </div>
        <div class="flex flex-wrap justify-center md:justify-end gap-3 *:grow *:md:shrink">
          <button
            type="reset"
            class="border-blue-950 border rounded-lg text-blue-950 p-2 w-[10rem]"
          >
            Clear
          </button>
          <button
            type="submit"
            class="bg-blue-950 rounded-lg text-white p-2 w-[10rem]"
          >
            {loading() ? "...loading" : "Submit"}
          </button>
        </div>
      </form>
    </>
  );
};