import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
import { inject, observer } from 'mobx-react';
import { navigate } from 'gatsby';

import CheckoutLayout from 'components/checkout-layout';

import CheckoutPage from './components/checkout-page';
import { CheckoutProps } from './checkout.types';

class Checkout extends Component<CheckoutProps> {
  componentDidMount = () => {
    this.redirectToShop();
  }

  redirectToShop = () => {
    if (!this.props.basketStore!.basket.length) {
      navigate('/shop', {
        replace: true
      });
    }
  }

  hasBasketItems = () => {
    return !this.props.basketStore!.totalItems;
  }

  render(): JSX.Element | null {
    if (this.hasBasketItems()) return null;

    return (
      <CheckoutLayout>
        <Helmet>
          <title>Checkout</title>
        </Helmet>
        <CheckoutPage />
      </CheckoutLayout>
    );
  }
}

export default inject('basketStore', 'checkoutStore')(observer(Checkout));