import React, { Component } from 'react';
import Link, { navigate } from 'gatsby-link';
import { Box, Flex, Text } from '@rebass/emotion';
import { inject, observer } from 'mobx-react';
import { injectStripe, StripeProvider, Elements } from 'react-stripe-elements';

import CheckoutStore from 'stores/checkout-store';

import { FluidContainer } from 'utils/styles/mixins';

import Divider from 'components/divider';
import CheckoutLayout from 'components/checkout-layout';
import {
  CheckoutFormContainer,
  CheckoutFlexContainer,
  CheckoutBasketContainer
} from 'components/checkout-layout/checkout-layout.styles';

import PaymentBasket from './components/payment-basket';
import PaymentForm from './components/payment-form';
import PaymentLoading from './components/payment-loading';
import BasketStore from 'stores/basket-store';

const StripePaymentForm = injectStripe(PaymentForm);

interface PaymentProps {
  checkoutStore?: CheckoutStore;
  basketStore?: BasketStore;
}

class Payment extends Component<PaymentProps> {
  componentDidMount = (): void => {
    this.generatePaymentIntent();
    this.redirectToCheckout();
  }

  redirectToCheckout = (): void => {
    if (this.isCheckoutInvalid()) {
      if (!this.hasBasketItems()) {
        navigate('/shop', {
          replace: true
        });
      } else {
        navigate('/checkout', {
          replace: true
        });
      }
    }
  }

  generatePaymentIntent = (): void => {
    if (
      !this.isCheckoutInvalid()
      && this.hasBasketItems()
      && !this.hasExistingPaymentIntent()
    ) {
      this.props.checkoutStore!.generatePaymentIntent();
    }
  }

  hasExistingPaymentIntent = (): boolean => {
    return this.props.checkoutStore!.paymentIntent;
  }

  hasBasketItems = (): boolean => {
    return !!this.props.basketStore!.basket.length;
  }

  isCheckoutInvalid = (): boolean => {
    return !this.props.checkoutStore!.form.meta.isValid || !this.props.basketStore!.selectedDeliveryConfig;
  }

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

    return (
      <CheckoutLayout>
        <Box mt={5}>
          <FluidContainer>
            <CheckoutFlexContainer>
              <CheckoutFormContainer>
                <Divider />
                <Flex
                  justifyContent="space-between"
                  alignItems="center"
                >
                  <Text
                    as="h3"
                    my={'0px'}
                    fontSize={[5, 6]}
                    lineHeight={[6, 8]}
                  >
                    Information
                  </Text>
                  <Text
                    as={Link}
                    to="/checkout"
                    my={'0px'}
                    fontSize={1}
                    lineHeight={1}
                    fontWeight={600}
                    color="textDark"
                  >
                    Edit
                  </Text>
                </Flex>
                <Divider />
                <Box mt={[3, 5]}>
                  { this.props.checkoutStore!.paymentIntent ?
                    <StripeProvider
                      stripe={window.Stripe(process.env.GATSBY_STRIPE_API_KEY, {
                        stripeAccount: this.props.checkoutStore!.paymentIntent.merchant_stripe_connect_id
                      })}
                    >
                      <Elements>
                        <StripePaymentForm />
                      </Elements>
                    </StripeProvider>
                    :
                    <PaymentLoading />
                  }
                </Box>
              </CheckoutFormContainer>
              <CheckoutBasketContainer>
                <PaymentBasket />
              </CheckoutBasketContainer>
            </CheckoutFlexContainer>
          </FluidContainer>
        </Box>
      </CheckoutLayout>
    );
  }
}

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