import React, { useState, useEffect, useCallback, useMemo } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ContactForm from 'components/forms/ContactForm';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import { Form } from 'react-final-form';
import { getContent } from 'store/utils/helper';
import styleIdentifiers from './Contact.module.scss';
import backgroundLeft from './assets/contact-left.jpg';
import backgroundRight from './assets/contact-right.jpg';
import deco1 from './assets/deco-1.svg';
import deco2 from './assets/deco-2.svg';

const styles = classNames.bind(styleIdentifiers);

export interface ContactProps {}

const Contact = (props: ContactProps) => {
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const content = useSelector((state: StoreState) => state.content.raw);

  const handleSubmit = useCallback(
    values => {
      const body = getContent(content, 'pages.contact.right.bodyMessage', lg, values);
      console.log('body', body);

      window.location.href = `mailto:info@me-support.be?subject=${values.subject}&body=${body}`;
    },
    [content, lg],
  );

  return (
    <div className={styles('contact')}>
      <div className={styles('left')}>
        <img className={styles('background')} src={backgroundLeft} alt="background" />
        <div className={styles('content')}>
          <div className={styles('title-wrapper')}>
            <TextItem tag="h2" path="pages.contact.left.title" />
            <img src={deco1} alt="deco-contact" />
          </div>
          <TextItem tag="div" path="pages.contact.left.subtitle" />
          <a href="mailto:info@me-support.be">
            <ProjectButton relative color="primary" label="pages.contact.left.button" />
          </a>
        </div>
      </div>
      <div className={styles('right')}>
        <img className={styles('background')} src={backgroundRight} alt="background" />
        <div className={styles('content')}>
          <div className={styles('title-wrapper')}>
            <TextItem tag="h2" path="pages.contact.right.title" />
            <img src={deco2} alt="deco-coords" />
          </div>
          <TextItem tag="div" path="pages.contact.right.subtitle" />
          <Form component={ContactForm} onSubmit={handleSubmit} />
        </div>
      </div>
    </div>
  );
};

export default Contact;
