// LIBRARIES
import React, { Component, Fragment } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

// COMPONENTS
import DashboardList from './List';
import NotificationsCreate from './Create';
import MainContent from '../../../components/Dashboard/Layout/components/MainContent';
import { PAGE404 } from 'components/PageError/index';

// HELPER FUNCTIONS

class Dashboard extends Component {
  state = {
    pageRoutes: [
      {
        path: `${this.props.match.url}`,
        name: 'Notifications',
        component: DashboardList,
      },
      {
        path: `${this.props.match.url}/create`,
        name: 'Create Notification',
        component: NotificationsCreate,
      }
    ],
  };

  componentDidUpdate() {}

  render() {
    const { pageRoutes } = this.state;
    const { userInfo } = this.props;

    return (
      <div style={{ position: 'relative' }}>
        <MainContent
          pageRoutes={
            userInfo.data.userInfo.role == 1 ? (
              //|| userInfo.data.userInfo.role == 3
              pageRoutes
            ) : (
              []
            )
          }
        >
          {userInfo.data.userInfo.role == 1 ? (
            //|| userInfo.data.userInfo.role == 3
            <Switch>
              <Route exact path='/notifications' component={DashboardList} />
              <Route exact path='/notifications/create' component={NotificationsCreate} />
              <PAGE404 />
            </Switch>
          ) : (
            <Switch>
              <PAGE404 />
            </Switch>
          )}
        </MainContent>
      </div>
    );
  }
}

Dashboard = connect((state) => ({
  userInfo: state.login,
}))(Dashboard);

export default Dashboard;
