import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
import List from 'components/routes/Blog/List';
import Detail from 'components/routes/Blog/Detail';
import Manage from 'components/routes/Blog/Manage';
import OtherItemLayout from 'components/layouts/OtherItemLayout';
import styleIdentifiers from './blog.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type BlogProps = StateProps & DispatchProps & OwnProps;

const Blog = (props: BlogProps) => {
  const { match } = props;

  if (match.isExact) return <Redirect to="/blog/articles" />;

  return (
    <div className={styles('Blog')}>
      <div className={styles('nav-container')}>
        <div className={styles('nav')}>
          <div className={styles('page')}>
            <NavLink
              to="/blog/authors"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Authors</span>
            </NavLink>
          </div>
          <div className={styles('page')}>
            <NavLink
              to="/blog/categories"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Categories</span>
            </NavLink>
          </div>
          <div className={styles('page')}>
            <NavLink
              to="/blog/articles"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Articles</span>
            </NavLink>
          </div>
        </div>
      </div>
      <Switch>
        <Route exact path="/blog/:resource" component={List} />
        <Route exact path="/blog/:resource/create" component={Manage} />
        <Route exact path="/blog/:resource/:id" component={Detail} />
        <Route exact path="/blog/:resource/:id/edit" component={Manage} />
        <Route exact path="/blog/:resource/:id/:subResource" component={Detail} />
        <Route component={OtherItemLayout} />
      </Switch>
    </div>
  );
};

export default Blog;
