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

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

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import config from 'config/general';
import Listing from 'components/routes/Errors/Listing';
import Manage from 'components/routes/Errors/Manage';
import Detail from 'components/routes/Errors/Detail';
import styleIdentifiers from './Errors.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ErrorsProps = StateProps & DispatchProps & OwnProps;

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

  return (
    <div className={styles('errors')}>
      <Switch>
        <Route exact path="/cms/errors" component={Listing} />
        <Route exact path="/cms/errors/add" component={Manage} />
        <Route exact path="/cms/errors/:id" component={Detail} />
        <Route exact path="/cms/errors/:id/edit" component={Manage} />
      </Switch>
    </div>
  );
};

export default Errors;
