import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';

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

import { pushRoute } from 'store/utils/routes';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import SearchHandler from 'components/pageItems/SearchHandler';
import { NavLink } from 'react-router-dom';
import SeoHandler from 'components/global/SeoHandler';
import deco1 from './assets/deco-1.svg';
import deco2 from './assets/deco-2.svg';
import home from './assets/home.png';
import styleIdentifiers from './home.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type HomeProps = StateProps & DispatchProps & OwnProps;

const Home = (props: HomeProps) => {
  const lg = useSelector((state: StoreState) => state.content.lg);
  const profileData = useSelector((state: StoreState) => state.account.profile?.data);

  const createLink = useMemo(() => {
    if (!profileData) return pushRoute('login', lg);

    return pushRoute('addWorkspace', lg);
  }, [profileData, lg]);

  return (
    <div className={styles('home')}>
      <SeoHandler path="seo.home" />
      <div className={styles('main-section')}>
        <img src={home} className={styles('background')} alt="home" />
        <div className={styles('wrapper')}>
          <div className={styles('title-wrapper')}>
            <TextItem tag="h1" path="pages.home.title" />
            <img src={deco1} alt="decoration-1" className={styles('deco-1')} />
            <img src={deco2} alt="decoration-2" className={styles('deco-2')} />
          </div>
          <div className={styles('buttons')}>
            <NavLink to={pushRoute('search', lg)}>
              <ProjectButton color="primary" label="pages.home.search" />
            </NavLink>
            <NavLink to={createLink}>
              <ProjectButton color="white" label="pages.home.addSpace" />
            </NavLink>
          </div>
        </div>
      </div>
      <div className={styles('map-wrapper')}>
        <SearchHandler noSeo noLoading />
      </div>
    </div>
  );
};

export default Home;
