import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Form from 'gatsby-core-theme/src/components/organisms/form';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { contactUsForm } from '../../../constants/forms';
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.',
  buttonLabel = 'Send Message',
  showButtonIcon = true,
  showLabels = true,
  showHeading = true,
  showDescription = true,
}) => {
  const { translations } = useContext(Context) || {};
  const activeMarket = page?.market;

  return (
    <div className={styles.contactForm || ''}>
      <div className={styles.contactBox || ''}>
        <div className={styles.formWrapper || ''}>
          {showHeading && <h1>{translate(translations, 'contact_us', 'Contact Us')}</h1>}
          {showDescription && (
            <p>
              {translate(
                translations,
                '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]}
            showLabels={showLabels}
            hasButton
            showButtonIcon={showButtonIcon}
            buttonLabel={buttonLabel}
            submitUrl={submitUrl}
            successMessage={successMessage}
            failMessage={failMessage}
            validationMessage={validationMessage}
          />
        </div>
      </div>
    </div>
  );
};

export default ContactForm;

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