import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here
import workspaceActions from 'store/workspace/actions';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { Switch } from 'react-router';
import { Route, NavLink } from 'react-router-dom';
import { getUrlFromPath, pushRoute } from 'store/utils/routes';
import CheckoutStep2 from 'components/routes/Checkout/CheckoutStep2';
import CheckoutStep1 from 'components/routes/Checkout/CheckoutStep1';
import SummaryCard from 'components/pageItems/SummaryCard';
import CheckoutStep3 from 'components/routes/Checkout/CheckoutStep3';
import order from 'store/order';
import BackButton from 'components/items/BackButton';
import styleIdentifiers from './checkoutLayout.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type CheckoutLayoutProps = StateProps & DispatchProps & OwnProps;

const CheckoutLayout = (props: CheckoutLayoutProps) => {
  const {
    match,
    match: { params },
    location: { pathname },
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const workspace = useSelector((state: StoreState) => state.workspace.detail?.data);

  // Allow to dispatch actions
  const dispatch = useDispatch();
  const getWorkspace = data => dispatch(workspaceActions.detail.request.action(data));

  // load workspace if not already in memory
  useEffect(() => {
    if (!workspace || workspace._id !== params.id) {
      getWorkspace({
        id: params.id,
      });
    }
  }, [params.id]);

  const step1Url = pushRoute('checkout.id.step1', lg, params);
  const step2Url = pushRoute('checkout.id.step2', lg, params);
  const step3Url = pushRoute('checkout.id.step3', lg, params);

  // if workspace is memory is not the one concerned do not continue
  if (workspace && workspace?._id !== params.id) return <BackButton />;

  return (
    <div className={styles('checkout-layout')}>
      <div className={styles('container')}>
        <div className={styles('nav')}>
          {/* <NavLink
            to={pushRoute('checkout.id.step1', lg, params)}
            className={styles(pathname === step1Url && 'active')}
          /> */}
          <span className={styles(pathname === step1Url && 'active')}>
            <TextItem path="1. " />
            <TextItem path="pages.checkout.summary" />
            <TextItem path=" > " />
          </span>
          <span className={styles(pathname === step2Url && 'active')}>
            <TextItem path="2. " />
            <TextItem path="pages.checkout.billingInfo" />
            <TextItem path=" > " />
          </span>
          <span className={styles(pathname === step3Url && 'active')}>
            <TextItem path="3. " />
            <TextItem path="pages.checkout.confirmationAndPayment" />
          </span>
        </div>

        <div className={styles('summary-wrapper')}>
          <div className={styles('summary-detail')}>
            <Switch>
              <Route
                exact
                path={getUrlFromPath('checkout.id.step1', match, { id: match.params.id })}
                component={CheckoutStep1}
              />
              <Route
                exact
                path={getUrlFromPath('checkout.id.step2', match, { id: match.params.id })}
                component={CheckoutStep2}
              />
              <Route
                exact
                path={getUrlFromPath('checkout.id.step3', match, { id: match.params.id })}
                component={CheckoutStep3}
              />
            </Switch>
          </div>
          <div className={styles('summary')}>
            {workspace && <SummaryCard workspace={workspace} />}
          </div>
        </div>
      </div>
    </div>
  );
};

export default CheckoutLayout;
