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

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink } from 'react-router-dom';
import { pushRoute } from 'store/utils/routes';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectBasicCard from 'components/listItems/ProjectBasicCard';
import styleIdentifiers from './account.scss';

// assets
import user from './assets/user.svg';
import euro from './assets/euro.svg';
import payment from './assets/payment.svg';
import alert from './assets/alert.svg';
import settings from './assets/settings.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type AccountProps = StateProps & DispatchProps & OwnProps;

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

  return (
    <div className={styles('account')}>
      <div className={styles('container')}>
        <h1>
          <TextItem path="pages.account.account" />
        </h1>
        <div className={styles('card-wrapper')}>
          <NavLink to={pushRoute('personalInfo', lg)} className={styles('item')}>
            <ProjectBasicCard title="pages.account.personalInfo" icon={user} />
          </NavLink>
          <NavLink to={pushRoute('invoicingInfo', lg)} className={styles('item')}>
            <ProjectBasicCard title="pages.account.invoicingDetails" icon={euro} />
          </NavLink>
          <NavLink to={pushRoute('payment', lg)} className={styles('item')}>
            <ProjectBasicCard title="pages.account.payment" icon={payment} />
          </NavLink>
          <NavLink to={pushRoute('payout', lg)} className={styles('item')}>
            <ProjectBasicCard title="pages.account.payout" icon={payment} />
          </NavLink>
          {/* <NavLink to={pushRoute('notifications', lg)} className={styles('item')}>
            <ProjectBasicCard title="pages.account.notification" icon={alert} />
          </NavLink> */}
          <NavLink to={pushRoute('settings', lg)} className={styles('item')}>
            <ProjectBasicCard title="pages.account.settings" icon={settings} />
          </NavLink>
        </div>
      </div>
    </div>
  );
};

export default Account;
