// Import ========================================================================================================================
import { textareaHeightControl } from '@vendor-web/js/components/input.js';
import FormWrapper from '@/components/aia/form-wrapper';
import App from '@/layouts/aia/app-layout';
// import '../../css/pages/contact-us.css';

import { formErrorMessage, formReset } from '@vendor-web/js/patterns/form.js';
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 ContactUs() {
    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 (

        <App>
            <section className="contactForm">
                <div className="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>
        </App>
    );
}
