import React from 'react';
import PropTypes from 'prop-types';
import Form from 'gatsby-core-theme/src/components/organisms/form';

import { FaEnvelope } from '@react-icons/all-files/fa/FaEnvelope';
import { contactUsForm } from 'gatsby-core-theme/src/constants/forms';
import useTranslate from '~hooks/useTranslate/useTranslate';
import SocialIcons from '../../../../components/atoms/social-icons';
import styles from './contact-form.module.scss';

const ContactForm = ({
  page,
  submitUrl,
  successMessage = 'Message sent successfully.',
  failMessage = 'Message failed to send.',
  validationMessage = 'Fill all the required fields.',
  showFollowUs = true,
  showEmail = true,
  buttonLabel = 'Send Message',
  showButtonIcon = true,
  showLabels = true,
  showHeading = true,
  showDescription = true,
  TitleTag = 'h1',
}) => {
  const activeMarket = page?.market;

  const { siteSchema } = page || {};
  const socialIcons =
    siteSchema &&
    (({ instagram, facebook, twitter, linkedin, youtube }) => ({
      instagram,
      facebook,
      twitter,
      linkedin,
      youtube,
    }))(siteSchema);

  const supportEmail = siteSchema?.support_email || null;
  const socialIconsNotNull = socialIcons && Object.values(socialIcons)?.some((value) => value);

  return (
    <div className={styles.contactForm || ''}>
      <div className={styles.contactBox || ''}>
        <div className={styles.formWrapper || ''}>
          {showHeading && <TitleTag>{useTranslate('contact_us', 'Contact Us')}</TitleTag>}
          {showDescription && (
            <p>
              {useTranslate(
                'contact_us_questions',
                `If you have questions about our reviews, games or content, or just want to leave some
            feedback, the Irish Luck team would love to hear from you. You can contact us any time
            using the details below and we'll endeavour to get back to you within 48 hours.`
              )}
            </p>
          )}
          <Form
            formOptions={contactUsForm[activeMarket] || contactUsForm.default}
            showLabels={showLabels}
            hasButton
            showButtonIcon={showButtonIcon}
            buttonLabel={buttonLabel}
            submitUrl={submitUrl}
            successMessage={successMessage}
            failMessage={failMessage}
            validationMessage={validationMessage}
          />
        </div>
        {(supportEmail || socialIconsNotNull) && (
          <div className={styles.socialSection || ''}>
            {showFollowUs && Object.values(socialIcons).some((value) => value) && (
              <SocialIcons socialIcons={socialIcons} />
            )}
            {showEmail && supportEmail && (
              <div className={styles.emailContainer || ''}>
                <h2>{useTranslate('send_us_an_email', 'Send us an email')}</h2>
                <p className={styles.email || ''}>
                  <span>
                    <FaEnvelope title="Envelope Icon" />
                  </span>
                  <a
                    aria-label={useTranslate('ariaLabel-email', 'Email')}
                    href={`mailto:${supportEmail}`}
                    target="_blank"
                    rel="noreferrer"
                  >
                    {supportEmail}
                  </a>
                </p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default ContactForm;

ContactForm.propTypes = {
  page: PropTypes.shape({
    siteSchema: PropTypes.shape({}),
    market: PropTypes.string,
  }).isRequired,
  submitUrl: PropTypes.string,
  successMessage: PropTypes.string,
  failMessage: PropTypes.string,
  validationMessage: PropTypes.string,
  showFollowUs: PropTypes.bool,
  showEmail: PropTypes.bool,
  buttonLabel: PropTypes.string,
  showButtonIcon: PropTypes.string,
  showLabels: PropTypes.bool,
  showHeading: PropTypes.bool,
  showDescription: PropTypes.bool,
  TitleTag: PropTypes.string,
};
