import React, { useState, useEffect } from 'react';
import { Form } from 'react-final-form';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink } from 'react-router-dom';
import qs from 'query-string';

// Import actions here
import accountActions from 'store/account/actions';
import bookingActions from 'store/booking/actions';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import CheckoutForm from 'components/forms/CheckoutForm';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { pushRoute } from 'store/utils/routes';
import CheckoutPaymentInfoForm from 'components/forms/CheckoutPaymentInfoForm';
import order from 'store/order';
import ProjectModal from 'components/items/ProjectModal';
import app from 'store/app';
import styleIdentifiers from './checkoutStep2.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type CheckoutStep2Props = StateProps & DispatchProps & OwnProps;

const CheckoutStep2 = (props: CheckoutStep2Props) => {
  const {
    history,
    location,
    match: { params },
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const profile = useSelector((state: StoreState) => state.account.profile?.data);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const finalise = data => dispatch(order.actions.finaliseCheckoutWithStripe.request.action(data));
  const deleteOrder = data => dispatch(order.actions.delete.request.action(data));
  const dialogShow = data => dispatch(app.actions.dialog.show.action(data));

  const submit = values => {
    console.log('values', values);

    const data = {
      contactInfo: {
        firstName: profile.firstName,
        lastName: profile.lastName,
        email: profile.email,
        address: profile.address,
      },
    };

    if (values.addBilling && values.billingInfo) {
      data.billingInfo = {
        firstName: values.billingInfo.firstName,
        lastName: values.billingInfo.lastName,
        email: profile.email,
        company: values.billingInfo.company,
        vatNumber: values.billingInfo.vatNumber,
        address: values.billingInfo.address,
      };
    } else {
      data.billingInfo = data.contactInfo;
    }

    console.log('data', data);

    finalise({
      data,
      callback: () => {
        history.push(
          pushRoute('checkout.id.step3', lg, {
            id: params.id,
          }),
        );
      },
    });
  };

  const actionDelete = () => {
    deleteOrder({
      callback: () => {
        history.push(pushRoute('search'), lg);
      },
    });
  };

  const confirmDelete = () => {
    dialogShow({
      id: 'custom',
      children: (
        <ProjectModal
          title="pages.checkout.delete.title"
          message="pages.checkout.delete.message"
          actionRight={actionDelete}
        />
      ),
    });
  };

  return (
    <div className={styles('checkout-step2')}>
      <h1>
        <TextItem path="pages.checkout.billingInfo" />
      </h1>
      <Form
        actionDelete={confirmDelete}
        component={CheckoutPaymentInfoForm}
        onSubmit={submit}
        disclaimer="pages.checkout.disclaimer"
        customClassName={styles('form')}
      />
    </div>
  );
};

export default CheckoutStep2;
