import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
import List from 'components/routes/Event/List';
import Manage from 'components/routes/Event/Manage';
import Detail from 'components/routes/Event/Detail';
import styleIdentifiers from './event.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type EventProps = StateProps & DispatchProps & OwnProps;

const Event = (props: EventProps) => {
  const { match } = props;

  if (match.isExact) return <Redirect to="/event/events" />;

  return (
    <div className={styles('Event')}>
      <div className={styles('nav-container')}>
        <div className={styles('nav-content')}>
          <div className={styles('item-wrapper')}>
            <NavLink
              to="/event/partners"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Partners</span>
            </NavLink>
          </div>
          <div className={styles('item-wrapper')}>
            <NavLink
              to="/event/categories"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Categories</span>
            </NavLink>
          </div>
          <div className={styles('item-wrapper')}>
            <NavLink
              to="/event/speakers"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Speakers</span>
            </NavLink>
          </div>
          <div className={styles('item-wrapper')}>
            <NavLink
              to="/event/venues"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Venues</span>
            </NavLink>
          </div>
          <div className={styles('item-wrapper')}>
            <NavLink
              to="/event/events"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Events</span>
            </NavLink>
          </div>
        </div>
      </div>
      <Switch>
        <Route exact path="/event/:resource" component={List} />
        <Route exact path="/event/:resource/create" component={Manage} />
        <Route exact path="/event/:resource/:id/edit" component={Manage} />
        <Route path="/event/:resource/:id" component={Detail} />
      </Switch>
    </div>
  );
};

export default Event;
