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/Shop/List';
import Manage from 'components/routes/Shop/Manage';
import Detail from 'components/routes/Shop/Detail';
import qs from 'query-string';
import { constants } from 'config/general';
import adminConfig from 'config/admin';
import styleIdentifiers from './shop.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ShopProps = StateProps & DispatchProps & OwnProps;

const Shop = (props: ShopProps) => {
  const { match } = props;
  const productType = constants && constants.productType;

  if (match.isExact)
    return (
      <Redirect
        to={{
          pathname: '/shop/products',
          search: productType && qs.stringify({ productType: productType[0].value }),
        }}
      />
    );

  const orderStatus = adminConfig?.adminShop?.orderStatus;

  return (
    <div className={styles('Shop')}>
      <div className={styles('nav-container')}>
        <div className={styles('nav')}>
          <div className={styles('page')}>
            <NavLink
              to={{
                pathname: '/shop/products',
                search: productType && qs.stringify({ productType: productType[0].value }),
              }}
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Products</span>
            </NavLink>
          </div>
          <div className={styles('page')}>
            <NavLink
              to="/shop/promos"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Promos</span>
            </NavLink>
          </div>
          <div className={styles('page')}>
            <NavLink
              to={{
                pathname: '/shop/orders',
                search: orderStatus && qs.stringify({ orderStatus: orderStatus[0].value }),
              }}
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Orders</span>
            </NavLink>
          </div>
          <div className={styles('page')}>
            <NavLink
              to={{
                pathname: '/shop/vatClass',
              }}
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>VAT</span>
            </NavLink>
          </div>
        </div>
      </div>
      <Switch>
        <Route exact path="/shop/:resource" component={List} />
        <Route exact path="/shop/:resource/create" component={Manage} />
        <Route exact path="/shop/:resource/:id/edit" component={Manage} />
        <Route path="/shop/:resource/:id" component={Detail} />
      </Switch>
    </div>
  );
};

export default Shop;
