import { useSubmission } from '@solidjs/router';
import { Show } from 'solid-js';
import { type ContactForm } from '~/routes/contact';
import { Spinner } from '../icons/Spinner';

type Props = {
  contactHandler: ContactForm;
};
export function Contact(props: Props) {
  const draft = useSubmission(props.contactHandler);


  const onInput = () => {
    if (draft.result?.fieldErrors) {
      draft.clear();
    }
  };

  return (
    <section>
      <div class="container" id="contact">
        <header>
          <div class="kicker">Reach out</div>
          <h2>
            <b>Contact</b> us
          </h2>
        </header>
        <div class="our-contacts">


          <div class="message">
            <div class="kicker">Drop a note or call</div>
            <Show
              when={draft.result?.success}
              fallback={
                <form method="post" action={props.contactHandler}>
                  <Show when={draft.result?.error} keyed>
                    {(er) => <p class="form-error">{er}, try again shortly!</p>}
                  </Show>
                  <select name="topic" id="topic" required>
                    {/* <button>
                      <selectedcontent></selectedcontent>
                    </button> */}
                    <option value="support" selected>
                      Support
                    </option>
                    <option value="inquiry">Inquiry</option>
                  </select>

                  <label>
                    <span class="fd">Email*</span>
                    <input
                      name="email"
                      type="email"
                      placeholder="Email*"
                      autocomplete="off"
                      classList={{
                        'nu-input': true,
                        error: Boolean(draft.result?.fieldErrors?.email),
                      }}
                      onInput={onInput}
                    />
                    <div class="form-error">
                      <Show when={draft.result?.fieldErrors?.email} keyed>
                        {(email) => <span>{email}</span>}
                      </Show>
                    </div>
                  </label>
                  <label>
                    <span class="fd">First Name*</span>
                    <input
                      name="firstName"
                      type="text"
                      placeholder="First Name*"
                      autocomplete="off"
                      classList={{
                        'nu-input': true,
                        error: Boolean(draft.result?.fieldErrors?.firstName),
                      }}
                      onInput={onInput}
                    />
                    <div class="form-error">
                      <Show when={draft.result?.fieldErrors?.firstName} keyed>
                        {(name) => <span>{name}</span>}
                      </Show>
                    </div>
                  </label>
                  <label>
                    <span class="fd">Last Name*</span>
                    <input
                      name="lastName"
                      type="text"
                      placeholder="Last Name*"
                      autocomplete="off"
                      classList={{
                        'nu-input': true,
                        error: Boolean(draft.result?.fieldErrors?.lastName),
                      }}
                      onInput={onInput}
                    />
                    <div class="form-error">
                      <Show when={draft.result?.fieldErrors?.lastName} keyed>
                        {(name) => <span>{name}</span>}
                      </Show>
                    </div>
                  </label>
                  <label>
                    <span class="fd">Company*</span>
                    <input
                      name="company"
                      type="text"
                      placeholder="Company*"
                      autocomplete="off"
                      inert
                    />
                    <div class="form-error">
                      <Show when={draft.result?.fieldErrors?.company} keyed>
                        {(company) => <span>{company}</span>}
                      </Show>
                    </div>
                  </label>

                  <label>
                    <span class="fd">Request*</span>
                    <textarea
                      name="request"
                      rows="6"
                      placeholder="Request*"
                      autocomplete="off"
                      classList={{
                        'nu-input': true,
                        error: Boolean(draft.result?.fieldErrors?.request),
                      }}
                      onInput={onInput}
                    />
                    <div class="form-error">
                      <Show when={draft.result?.fieldErrors?.request} keyed>
                        {(request) => <span>{request}</span>}
                      </Show>
                    </div>
                  </label>
                  <button
                    class="btn-primary"
                    type="submit"
                    disabled={draft.pending}
                  >
                    {draft.pending ? (
                      <>
                        <Spinner /> <span>Sending...</span>
                      </>
                    ) : (
                      <span>Send Note</span>
                    )}
                  </button>
                </form>
              }
            >
              {(r) => {
                const [formdata] = draft.input;
                const form = Object.fromEntries(formdata.entries());

                return (
                  <div class="response">
                    <h3>Hi, {form.firstName}</h3>
                    <p>
                      Thank you for sending{' '}
                      {form.topic === 'support'
                        ? `a support request`
                        : `an inquiry`}
                      . We got your request now, which is below:
                    </p>
                    <p>
                      "<code>{form.request}</code>"
                    </p>
                    <p>
                      We will check for spams and the likes, and if everything
                      checks out, we will definetly get back to you within 48
                      hours. Expect our response at your email address (
                      {form.email}
                      ).
                    </p>

                    <p>Thank you.</p>
                  </div>
                );
              }}
            </Show>
          </div>
        </div>
      </div>
    </section>
  );
}