import React, { useState, useEffect } 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 ProjectButton from 'components/items/ProjectButton/ProjectButton';
import { pushRoute } from 'store/utils/routes';
import { NavLink, withRouter } from 'react-router-dom';
import styleIdentifiers from './accountStructure.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type AccountStructureProps = StateProps & DispatchProps & OwnProps;

const AccountStructure = (props: AccountStructureProps) => {
  const {
    className,
    otherRightElem,
    title,
    rightAction,
    rightBack,
    rightLabel,
    rightColor,
    children,
    history,
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className={styles('account-structure', className)}>
      <div className={styles('container')}>
        <div className={styles('top')}>
          <div className={styles('left')}>
            <div className={styles('nav')}>
              <NavLink to={pushRoute('account', lg)} className={styles('link')}>
                <TextItem path="pages.account.account" />
              </NavLink>
              <TextItem path={title} className={styles('strong')} />
            </div>
            <h1>
              <TextItem path={title} />
            </h1>
          </div>
          <div className={styles('right')}>
            {otherRightElem}
            {rightAction && (
              <ProjectButton
                relative
                label={rightLabel}
                color={rightColor || 'border-secondary'}
                action={rightAction}
              />
            )}
            {!rightAction && rightBack && (
              <ProjectButton
                relative
                label={rightLabel || 'pages.account.actions.cancel'}
                color={rightColor || 'border-secondary'}
                action={() => history.goBack()}
              />
            )}
          </div>
        </div>
        <div className={styles('info-wrapper')}>{children}</div>
      </div>
    </div>
  );
};

export default withRouter(AccountStructure);
