// Import ========================================================================================================================
import { textareaHeightControl } from '@vendor-web/js/components/input.js';


import FormWrapper from '@/components/aia/form-wrapper';
import Button from '@/components/aia/button';
import Input from '@/components/input';

import { useForm } from '@inertiajs/react';
import { getCountryOptions } from '@/data/countries';
import { companyTypeOptions, industryOptions, topicOptions } from '@/data/form-options';

export default function ContactUsForm() {
  const { data, setData, post } = useForm<{
    name: string;
    email: string;
    countryRegion: string;
    CompanyOrganization: string;
    Industry: string;
    topics: string;
    message: string;
    privacyPolicyCheck: boolean;
  }>({
    name: '',
    email: '',
    countryRegion: '',
    CompanyOrganization: '',
    Industry: '',
    topics: '',
    message: '',
    privacyPolicyCheck: false,
  });

  textareaHeightControl();

  return (

    <section className="contactForm bg-white">
      <div className="container contactForm-container">
        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
        <div className="contactForm-information">
          <h1 className="text-h1-bold">Contact Us</h1>
          <address className="text-t3-medium">
            <ul>
              <li>Business Time: Mon.~Sat. 09:00-18:00</li>
              <li>
                Tel:{' '}
                <a className="underline" href="tel:886285123731">
                  +886 2-8512-3731
                </a>
              </li>
              <li>
                Email:{' '}
                <a className="underline" href="mailto:hi@aiacademy.tw">
                  hi@aiacademy.tw
                </a>
              </li>
            </ul>
          </address>
          <p className="text-white/80">
            We welcome a wide range of collaborations to engage in diverse activities, from conducting new research to delivering lectures
            and workshops.
          </p>
        </div>

        <FormWrapper
          className="contactForm-form"
          formSelector=".contactForm-form"
          submitButtonSelector=".contactForm-submit"
          checkboxSelector=".js-privacyPolicyCheck"
          onSuccess={() => {
            formReset({
              formSelector: '.contactForm-form',
              checkboxButtonDisableToggle: true,
            });
          }}
          onError={(error) => {
            formErrorMessage({
              formSelector: '.contactForm-form',
              errorData: error as object,
            });
          }}
        >
          <fieldset className="space-y-24">
            <legend className="text-h4-medium">Contact Information</legend>
            <div className="flex flex-wrap gap-32">
              <div className="inputText flex-1 basis-full lg:basis-2/5">
                <Input
                  id="name"
                  required={true}
                  type="text"
                  placeholder="Name *"
                  description=""
                  error={false}
                  value={data.name}
                  onChange={(val) => setData('name', val as string)}
                />
              </div>
              <div className="inputText flex-1 basis-full lg:basis-2/5">
                <Input
                  id="email"
                  required={true}
                  type="email"
                  placeholder="Email *"
                  description=""
                  error={false}
                  value={data.email}
                  onChange={(val) => setData('email', val as string)}
                />
              </div>
              <div className="inputText flex-1 basis-full lg:basis-2/5">
                <Input
                  id="countryRegion"
                  required={true}
                  type="select"
                  placeholder="Country / Region *"
                  description=""
                  error={false}
                  options={getCountryOptions()}
                  value={data.countryRegion}
                  onChange={(val) => setData('countryRegion', val as string)}
                />
              </div>
              <div className="inputText lg:basis-1/4 basis-full flex-1">

                <Input
                  id="CompanyOrganization"
                  required={true}
                  type="select"
                  placeholder="Company/Organization *"
                  description=""
                  error={false}
                  options={companyTypeOptions}
                  value={data.CompanyOrganization}
                  onChange={(val) => setData('CompanyOrganization', val as string)}
                />
              </div>
              <div className="inputText lg:basis-1/4 basis-full flex-1">
                <Input
                  id="Industry"
                  required={true}
                  className="flex-1 basis-full lg:basis-1/4"
                  type="select"
                  placeholder="Industry *"
                  description=""
                  error={false}
                  options={industryOptions}
                  value={data.Industry}
                  onChange={(val) => setData('Industry', val as string)}
                />
              </div>
            </div>
          </fieldset>

          <fieldset className="space-y-24">
            <legend className="text-h4-medium">Message</legend>
            <div className="inputText">

              <Input
                id="topics"
                required={true}
                type="select"
                placeholder="Select a topic *"
                description=""
                error={false}
                options={topicOptions}
                value={data.topics}
                onChange={(val) => setData('topics', val as string)}
              />
            </div>
            <div className="inputText">
              <Input
                id="message"
                required={true}
                type="textarea"
                placeholder="Message"
                description=""
                error={false}
                value={data.message}
                onChange={(val) => setData('message', val as string)}
              />
            </div>
          </fieldset>

          <div className="flex flex-col items-center space-y-24">
            <Input
              id="privacyPolicyCheck"
              required={true}
              className="js-privacyPolicyCheck"
              type="checkbox"
              placeholder=""
              description=""
              error={false}
              value={data.privacyPolicyCheck}
              onChange={(val) => setData('privacyPolicyCheck', val as boolean)}
            >
              I agree to the{' '}
              <a className="underline" href="javascript:;">
                Privacy Policy
              </a>{' '}
              of AIA
            </Input>
            <div className="space-y-8">
              <Button
                label="Submit"
                buttonType="submit"
                type="button button--ghost contactForm-submit"
              />
              <p className="text-t5-medium text-center">Please agree Privacy Policy first.</p>
            </div>
          </div>
        </FormWrapper>
      </div>
    </section>
  );
}