/* eslint-disable @next/next/no-img-element */
import React from 'react';
import Head from 'next/head';
import { GetServerSideProps } from 'next/types';
// @Antd
import { Button, Col, Form, notification, Input, Row } from 'antd';
// @i18n
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
// @Images
import { BackgroundFill } from '../../public/images';
// @Layout
import { LayoutWrapper } from '../../src/components/layouts/wrapper';
import { Map } from '../../src/components/less/maps';
// @Styled
import styles from '../../src/components/pages/contact/index.module.less';
import Image from 'next/image';

// @Icons
import { FacebookIcon, LinkedinIcon, InstagramIcon, WebIcon, TwitterIcon } from '../../public/images';

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale as string, [
        'common',
        'contact',
      ])),
    },
  };
};

export default function Contact() {
  const { t } = useTranslation();

  const [form] = Form.useForm();
  const [onSubmitted, setOnSubmitted] = React.useState<boolean>(false);

  const onFinish = (values: any) => {
    setOnSubmitted(true);

    fetch('/api/contact', {
      method: 'POST',
      headers: {
        Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    }).then((res) => {
      setOnSubmitted(false);

      if (res.status === 200) {
        notification.success({
          message: t('common:success'),
          description: t('common:formComplete'),
          className: 'custom-class',
        });

        form.resetFields();
        return;
      }

      notification.error({
        message: 'Error',
        description: t('common:formError'),
        className: 'custom-class',
      });
    });
  };

  const onFinishFailed = () => {
    notification.warning({
      message: t('common:warningForm'),
      description: t('common:formIncomplete'),
      className: 'custom-class',
    });
  };

  return (
    <main className={'container '.concat(styles.wrapper__page)}>
      <Head>
        <title>{t('contact:title')} | GHF</title>
        <meta name='description' content={t('contact:info')} key='desc' />
      </Head>
      <section
        style={{
          background: `url(${BackgroundFill})`,
          backgroundSize: 'cover',
          backgroundPosition: '-10px',
        }}
      >
        <Row className='wrapper__content'>
          <Col className='wrapper__content--horizontal'>
            <h1 className={styles.contact__title}>{t('contact:title')}</h1>
            <Row>
              <Col sm={24} lg={12}>
                <div>
                  <p className={styles.contact__subtitle}>
                    {t('contact:info')}
                  </p>
                </div>
                <div className={styles.wrapper__address}>
                  <h3 className={styles.address__title}>
                    {t('contact:phone')}
                  </h3>
                  <p className={styles.address__line}>
                    <a
                      className={styles.address__link}
                      href='tel:(832)-708-9157'
                    > (832)-708-9157</a>
                  </p>
                </div>
                <div className={styles.wrapper__address}>
                  <h3 className={styles.address__title}>
                    {t('contact:email')}
                  </h3>
                  <p className={styles.address__line}>
                    {/* {t('contact:email')}:{' '} */}
                    <a
                      className={styles.address__link}
                      href='mailto:presidencia@goldenhispanicfoundation.org'
                    >
                      presidencia@goldenhispanicfoundation.org
                    </a>
                  </p>
                  <p className={styles.address__line}>
                    {/* {t('contact:email')}:{' '} */}
                    <a
                      className={styles.address__link}
                      href='mailto:info@goldenhispanicfoundation.org'
                    >
                      info@goldenhispanicfoundation.org
                    </a>
                  </p>
                </div>
                <div className={styles.wrapper__address}>
                  <h3 className={styles.address__title}>
                    {t('contact:office')}
                  </h3>
                  <p className={styles.address__line}>
                    6102 Bissonnet st Suite B1
                  </p>
                  <p className={styles.address__line}>
                    Houston, Texas, 77081 EEUU
                  </p>
                </div>    
              </Col>
              <Col sm={24} lg={12} style={{ }}>
                <div className={styles.form}>
                  <Form
                    form={form}
                    name='basic'
                    layout='vertical'
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete='off'
                    requiredMark={false}
                  >
                    <Row>
                      <Col span={24}>
                        <Form.Item
                          label={t('contact:formLabel:name')}
                          name='name'
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={24}>
                        <Form.Item
                          label={t('contact:formLabel:email')}
                          name='email'
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={24}>
                        <Form.Item
                          label={t('contact:formLabel:phone')}
                          name='phone'
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={24}>
                        <Form.Item
                          label={t('contact:formLabel:message')}
                          name='msg'
                          rules={[{ required: true }]}
                        >
                          <Input.TextArea showCount maxLength={500} />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={24}>
                        <Form.Item>
                          <Button
                            type='primary'
                            htmlType='submit'
                            disabled={onSubmitted}
                          >
                            {t('contact:formButton:send')}
                          </Button>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </div>
              </Col>
            </Row>
            <Row>
                  <div className={`${styles.wrapper__address} ${styles.wrapper__map}`}>
                  <Map key='map' />
                </div> 
            </Row>
          </Col>
        </Row>
      </section>
    </main>
  );
}

Contact.getLayout = function getLayout(page: React.ReactElement) {
  return <LayoutWrapper>{page}</LayoutWrapper>;
};
