import * as React from 'react';
import classNames from 'classnames/bind';
import { Switch } from 'react-router';
import { Route, NavLink } from 'react-router-dom';
import { config, nav } from 'config/general';
import Listing from 'components/routes/Generic/Listing';
import Manage from 'components/routes/Generic/Manage';
import ResourceItem from 'components/layouts/ResourceItem';
import Nav from 'components/global/Nav';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './resource.scss';

const styles = classNames.bind(styleIdentifiers);

interface ResourceProps {}

interface ResourceState {}

export default class Resource extends React.Component<ResourceProps, ResourceState> {
  componentDidUpdate(prevProps) {
    const { selectedResource } = this.props;

    if (selectedResource && selectedResource !== prevProps.selectedResource) {
      console.log('RELOAD');
    }
  }

  renderHistoryElement = (item, index) => {
    const { name, type } = item;

    const { subData, listData } = item.params;

    return (
      <React.Fragment key={index}>
        {index > 0 && <span className={styles('index')}>{'>'}</span>}
        <NavLink
          exact
          className={styles('link')}
          activeClassName={styles('active')}
          to={{
            pathname: item.pathname,
            search: item.search,
          }}
          isActive={(match, location) => {
            return location?.pathname === item.pathname;
          }}
        >
          <TextItem path={name || subData || listData || type} />
        </NavLink>
      </React.Fragment>
    );
  };

  render(): JSX {
    const { appHistory } = this.props;

    return (
      <div className={styles('Resource')}>
        <Nav navigation={nav} />
        <div className={styles('content-wrapper')}>
          <div className={styles('content')}>
            <div className={styles('history')}>
              {appHistory && appHistory.map(this.renderHistoryElement)}
            </div>
            <Switch>
              <Route exact path={`/${config.resourcePath}/:type`} component={Listing} />
              <Route path={`/${config.resourcePath}/:type/create`} component={Manage} />
              {/* Add Route here so that ResourceItem has the parameters */}
              <Route
                path={`/${config.resourcePath}/:type/:id/actions/:form`}
                component={ResourceItem}
              />
              <Route
                path={`/${config.resourcePath}/:type/:id/subdata/:subData`}
                component={ResourceItem}
              />
              <Route
                path={`/${config.resourcePath}/:type/:id/listdata/:listData/create`}
                component={ResourceItem}
              />
              <Route
                path={`/${config.resourcePath}/:type/:id/listdata/:listData/:index`}
                component={ResourceItem}
              />
              <Route
                path={`/${config.resourcePath}/:type/:id/listdata/:listData`}
                component={ResourceItem}
              />
              {/* linked */}
              <Route path={`/${config.resourcePath}/:type/:id`} component={ResourceItem} />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
