import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { Redirect, Route } from 'react-router-dom';
import { Switch } from 'react-router';
import { getUrlFromPath } from 'store/utils/routes';
import config from 'config/general';

// stripe
import { loadStripe } from '@stripe/stripe-js';
import { CardElement, Elements, useStripe, useElements } from '@stripe/react-stripe-js';

import Footer from 'components/global/Footer';

import Home from 'components/routes/Home';

import Login from 'components/routes/Login';
import ResetPassword from 'components/routes/ResetPassword';
import SignupStep1 from 'components/routes/SignUp/Step1';
import SignupStep2 from 'components/routes/SignUp/Step2';

import NotFound from 'components/routes/NotFound';

import Introduction from 'components/routes/Introduction';

import DetailWorkspace from 'components/routes/DetailWorkspace';
import ManageWorkspace from 'components/routes/ManageWorkspace';

import Account from 'components/routes/Account';
import PersonalInfo from 'components/routes/PersonalInfo';
import EditPersonalInfo from 'components/routes/EditPersonalInfo';
import InvoicingInfo from 'components/routes/InvoicingInfo';
import EditInvoicingInfo from 'components/routes/EditInvoicingInfo';
import Settings from 'components/routes/Settings';
import Notifications from 'components/routes/Notifications';
import PaymentInfos from 'components/routes/PaymentInfos';
import AddPaymentMethod from 'components/routes/AddPaymentMethod';

import CheckoutStep1 from 'components/routes/Checkout/CheckoutStep1';
import CheckoutStep2 from 'components/routes/Checkout/CheckoutStep2';

import MySpaces from 'components/routes/MySpaces';
import MyBookings from 'components/routes/MyBookings';

// import DetailWorkspaceBooking from 'components/routes/DetailWorkspaceBooking';
import DetailWorkspaceBookingListing from 'components/routes/DetailWorkspaceBookingListing';

import MailBox from 'components/routes/MailBox';
import FavoriteWorkspaces from 'components/routes/FavoriteWorkspaces';
import Payout from 'components/routes/Payout';
import OrderSuccess from 'components/routes/OrderSuccess';
import Search from 'components/routes/Search';
import Terms from 'components/routes/Terms';
import PrivacyPolicy from 'components/routes/PrivacyPolicy';
import Contact from 'components/routes/Contact';
import CheckoutLayout from '../CheckoutLayout';
import styleIdentifiers from './app.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type AppProps = StateProps & DispatchProps & OwnProps;

const App = (props: AppProps) => {
  const { match } = props;

  const stripePromise = loadStripe(config.stripeKey);

  return (
    <div className={styles('App')}>
      <Elements stripe={stripePromise}>
        <Switch>
          {/* Not loggued routes */}
          <Route exact path={getUrlFromPath('home', match)} component={Home} />
          <Route exact path={getUrlFromPath('terms', match)} component={Terms} />
          <Route exact path={getUrlFromPath('privacy', match)} component={PrivacyPolicy} />
          <Route exact path={getUrlFromPath('contact', match)} component={Contact} />
          <Route exact path={getUrlFromPath('search', match)} component={Search} />
          <Route exact path={getUrlFromPath('login', match)} component={Login} />
          <Route exact path={getUrlFromPath('resetPassword', match)} component={ResetPassword} />
          <Route exact path={getUrlFromPath('register', match)} component={SignupStep1} />
          <Route exact path={getUrlFromPath('register.step2', match)} component={SignupStep2} />
          <Route exact path={getUrlFromPath('introduction', match)} component={Introduction} />
          {/* Not workspaces routes */}
          <Route exact path={getUrlFromPath('addWorkspace', match)} component={ManageWorkspace} />
          <Route exact path={getUrlFromPath('myBookings', match)} component={MyBookings} />
          <Route
            exact
            path={getUrlFromPath('detailWorkspace.id', match)}
            component={DetailWorkspace}
          />
          <Route
            exact
            path={getUrlFromPath('editWorkspace.id', match)}
            component={ManageWorkspace}
          />
          <Route
            exact
            path={getUrlFromPath('detailWorkspaceBookings.id', match)}
            component={DetailWorkspaceBookingListing}
          />
          <Route exact path={getUrlFromPath('mySpaces', match)} component={MySpaces} />
          <Route exact path={getUrlFromPath('myFavorites', match)} component={FavoriteWorkspaces} />

          <Route exact path={getUrlFromPath('account', match)} component={Account} />
          <Route exact path={getUrlFromPath('personalInfo', match)} component={PersonalInfo} />
          <Route exact path={getUrlFromPath('payment', match)} component={PaymentInfos} />
          <Route exact path={getUrlFromPath('payout', match)} component={Payout} />
          <Route
            exact
            path={getUrlFromPath('addPaymentMethod', match)}
            component={AddPaymentMethod}
          />
          <Route
            exact
            path={getUrlFromPath('editPersonalInfo', match)}
            component={EditPersonalInfo}
          />
          <Route exact path={getUrlFromPath('invoicingInfo', match)} component={InvoicingInfo} />
          <Route
            exact
            path={getUrlFromPath('addInvoicingInfo', match)}
            component={EditInvoicingInfo}
          />

          <Route
            exact
            path={`${getUrlFromPath('editInvoicingInfo', match)}/:id`}
            component={EditInvoicingInfo}
          />
          <Route exact path={getUrlFromPath('settings', match)} component={Settings} />
          <Route exact path={getUrlFromPath('notifications', match)} component={Notifications} />
          <Route exact path={getUrlFromPath('mySpaces', match)} component={MySpaces} />
          <Route path={`${getUrlFromPath('checkout', match)}/:id`} component={CheckoutLayout} />

          <Route exact path={getUrlFromPath('mailBox.id', match)} component={MailBox} />
          <Route exact path={getUrlFromPath('mailBox', match)} component={MailBox} />
          <Route exact path={getUrlFromPath('orderSuccess', match)} component={OrderSuccess} />

          <Route component={NotFound} />
        </Switch>
      </Elements>
    </div>
  );
};

export default App;
