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 Listing from 'components/routes/Lists/Listing';
import Manage from 'components/routes/Lists/Manage';
import Detail from 'components/routes/Lists/Detail';
import config from 'config/general';
import styleIdentifiers from './lists.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ListsProps = StateProps & DispatchProps & OwnProps;

const Lists = (props: ListsProps) => {
  const {
    history,
    match: { params },
  } = props;

  const menu = config.listEnum;

  if (!menu) return false;

  useEffect(() => {
    if (!params.resource) {
      history.push(`/cms/lists/${menu[0].value}`);
    }
  }, [menu, params]);

  return (
    <div className={styles('lists')}>
      <div className={styles('nav-container')}>
        <div className={styles('nav-content')}>
          {menu.map((item, key) => {
            return (
              <NavLink
                key={key}
                to={`/cms/lists/${item.value}`}
                className={styles('item', 'link-wrapper')}
                activeClassName={styles('state-active')}
                isActive={(match, location) => {
                  return location?.pathname?.indexOf(`/cms/lists/${item.value}`) >= 0;
                }}
              >
                <TextItem item={item.text || item.label} />
              </NavLink>
            );
          })}
        </div>
      </div>
      <Switch>
        <Route exact path="/cms/lists/:resource" component={Listing} />
        <Route exact path="/cms/lists/:resource/create" component={Manage} />
        <Route exact path="/cms/lists/:resource/add" component={Manage} />
        <Route exact path="/cms/lists/:resource/:id" component={Detail} />
        <Route exact path="/cms/lists/:resource/:id/edit" component={Manage} />
      </Switch>
    </div>
  );
};

export default Lists;
