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 config from 'config/general';
import { Switch, Route } from 'react-router-dom';
import Nav from 'components/global/Nav';
import Content from 'components/routes/Content';
import styleIdentifiers from './cms.scss';
import Lists from '../Lists';
import Mails from '../Mails';
import Errors from '../Errors';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type CmsProps = StateProps & DispatchProps & OwnProps;

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

  let menu = config.cmsMenu;

  if (!menu)
    menu = [
      {
        title: 'Pages',
        icon: 'edit',
        link: '/cms/pages',
      },
    ];

  return (
    <div className={styles('cms')}>
      <Nav navigation={menu} />
      <Switch>
        <Route path="/cms/lists/:resource" component={Lists} />
        <Route path="/cms/lists" component={Lists} />
        <Route path="/cms/errors" component={Errors} />
        <Route path="/cms/pages/:id" component={Content} />
        <Route path="/cms/pages" component={Content} />
        <Route path="/cms/mails" component={Mails} />
      </Switch>
    </div>
  );
};

export default Cms;
