// Import ========================================================================================================================
import { textareaHeightControl } from '/data/www/aia-official-en-main/web/src/js/components/input.js';


import { checkboxButtonDisableToggle, formErrorMessage, formReset, formValidation } from '/data/www/aia-official-en-main/web/src/js/patterns/form.js';
import Button from '@/components/aia/button';
import Input from '@/components/input';

import { useForm } from '@inertiajs/react';

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,
  });

  checkboxButtonDisableToggle({
    buttonSelector: '.contactForm-submit',
    checkboxSelector: '.js-privacyPolicyCheck',
  });

  textareaHeightControl();

  async function formSubmit() {
    try {
      // alert('表單送出');
      await formValidation('.contactForm-form');
      console.log();

      // 驗證成功處理
      formReset({
        formSelector: '.contactForm-form',
        checkboxButtonDisableToggle: true,
      });
    } catch (error) {
      // 驗證失敗處理
      formErrorMessage({
        formSelector: '.contactForm-form',
        errorData: error as object,
      });

      // formSubmit();
    }
  }

  formSubmit(); //去綁定事件 listener

  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>

        <form className="contactForm-form">
          <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={[
                    { value: '1', label: '選項1' },
                    { value: '2', label: '選項2' },
                    { value: '3', label: '選項3' },
                  ]}
                  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={[
                    { value: '1', label: '選項1' },
                    { value: '2', label: '選項2' },
                    { value: '3', label: '選項3' },
                  ]}
                  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={[
                    { value: '1', label: '選項1' },
                    { value: '2', label: '選項2' },
                    { value: '3', label: '選項3' },
                  ]}
                  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={[
                  { value: '1', label: '選項1' },
                  { value: '2', label: '選項2' },
                  { value: '3', label: '選項3' },
                ]}
                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"
                onClick={formSubmit} />
              <p className="text-t5-medium text-center">Please agree Privacy Policy first.</p>
            </div>
          </div>
        </form>
      </div>
    </section>
  );
}