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

import { Switch } from 'react-router';
import { Route, Redirect } from 'react-router-dom';
import Profile from 'components/routes/Account/Profile';
import Nav from 'components/global/Nav';
import config from 'config/general';
import ChangePassword from 'components/routes/Account/ChangePassword';
import OtherLayout from 'components/layouts/OtherLayout';
import styleIdentifiers from './account.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type AccountProps = StateProps & DispatchProps & OwnProps;

const Account = (props: AccountProps) => {
  const accountNavigation = config.accountOptions.nav;

  return (
    <div className={styles('Account')}>
      <Nav navigation={accountNavigation} />
      <div className={styles('content-wrapper')}>
        <Switch>
          <Route path="/account/profile" component={Profile} />
          <Route path="/account/change-password" component={ChangePassword} />
          <Route path="/account" component={OtherLayout} />
        </Switch>
      </div>
    </div>
  );
};

export default Account;
