import React, { useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom';

// 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 { pushRoute } from 'store/utils/routes';
import get from 'lodash/get';
import styleIdentifiers from './footer.scss';
import facebook from './assets/facebook.svg';
import logo from './assets/logo.svg';
import instagram from './assets/instagram.svg';
import linkedin from './assets/linkedin.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type FooterProps = StateProps & DispatchProps & OwnProps;

const Footer = (props: FooterProps) => {
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const content = useSelector((state: StoreState) => state.content.raw);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const renderLink = (text, path, params, search) => {
    return (
      <NavLink className={styles('item')} to={pushRoute(path, lg, params, search)}>
        <TextItem path={text} />
      </NavLink>
    );
  };

  return (
    <div className={styles('footer')}>
      <div className={styles('footer-container')}>
        <div className={styles('top')}>
          <div className={styles('left')}>
            <NavLink to={pushRoute('home', lg)}>
              <img src={logo} alt="logo" />
            </NavLink>
          </div>
          <div className={styles('flex', 'column-wrapper')}>
            <div className={styles('column')}>
              <div className={styles('title')}>
                <TextItem path="general.footer.plan" />
              </div>
              {renderLink('lists.workspaceType.meeting', 'search', null, '?meeting=true')}
              {renderLink('lists.workspaceType.individual', 'search', null, '?individual=true')}
              {renderLink('lists.workspaceType.open', 'search', null, '?open=true')}
              {renderLink('general.footer.contact', 'contact')}
            </div>
            <div className={styles('column')}>
              <TextItem tag="div" className={styles('title')} path="general.footer.company" />
              <TextItem tag="div" path="general.footer.companyName" />
              <TextItem tag="div" path="general.footer.companyAddress" />
              <TextItem tag="div" path="general.footer.companyTva" />
            </div>
            <div className={styles('column')}>
              <TextItem tag="div" className={styles('title')} path="general.footer.contactTitle" />
              <TextItem tag="div" path="general.footer.contactName" />
              <TextItem tag="div" path="general.footer.contactNumber" />
              <TextItem tag="div" path="general.footer.contactEmail" />
              <div className={styles('socials')}>
                <a href={get(content, 'general.footer.linkedin.link')}>
                  <img src={facebook} alt="facebook" target="_blank" rel="noopener" />
                </a>
                <a href={get(content, 'general.footer.linkedin.link')}>
                  <img src={instagram} alt="facebook" target="_blank" rel="noopener" />
                </a>
                <a href={get(content, 'general.footer.linkedin.link')}>
                  <img src={linkedin} alt="facebook" target="_blank" rel="noopener" />
                </a>
              </div>
            </div>
          </div>
        </div>
        <div className={styles('bottom')}>
          <div className={styles('flex')}>
            <div className={styles('footer-item')}>
              <TextItem path="general.footer.copyright" />
            </div>
          </div>
          <div className={styles('flex')}>
            <div className={styles('footer-item')}>
              <NavLink exact to={pushRoute('privacy', lg)}>
                <TextItem path="general.footer.privacy" />
              </NavLink>
            </div>
            <div className={styles('separate')}>-</div>
            <div className={styles('footer-item')}>
              <NavLink exact to={pushRoute('terms', lg)}>
                <TextItem path="general.footer.condition" />
              </NavLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Footer;
