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

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

// Import actions here

import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import Button from 'components/items/Button';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import { required, email, composeValidators } from 'store/utils/validation';
import StripeInput from 'components/formItems/StripeInput';
import { getContent } from 'store/utils/helper';
import styleIdentifiers from './checkoutForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type CheckoutFormProps = StateProps & DispatchProps & OwnProps;

const CheckoutForm = (props: CheckoutFormProps) => {
  const { handleSubmit, form, submitting, valid, customClassName, values } = props;

  // used to not set the default payment again and again
  const [once, setOnce] = useState(false);
  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);
  const lg = useSelector((state: StoreState) => state.content.lg);

  const availablePayments = useSelector(
    (state: StoreState) => state.account.profile?.data?.paymentInfo?.paymentMethods,
  );

  const options = {
    classes: {
      base: styles('base-stripe'),
      invalid: styles('invalid-stripe'),
      complete: styles('valid-stripe'),
    },
    style: {
      fontSize: 15,
      color: '#364350',
    },
    hidePostalCode: true,
  };

  const getAvailableMethods = () => {
    const array = [];
    if (availablePayments?.length > 0) {
      availablePayments.forEach(element => {
        if (element.default && !once) {
          form.change('cardMethod', element.sPayMethodId);
          setOnce(true);
        }
        array.push({
          label: `${element.cardInfo.brand.toUpperCase()} - ${element.nameOnCard} - **** ${
            element.cardInfo?.last4
          }`,
          value: element.sPayMethodId,
        });
      });
    }

    array.push({
      label: getContent(content, 'forms.checkout.payment.cardMethod.newMethod', lg),
      value: 'other',
    });

    return array;
  };

  return (
    <form className={styles('CheckoutForm', customClassName)} onSubmit={handleSubmit}>
      <Field
        component={ProjectInput}
        name="cardMethod"
        type="select"
        seed="select"
        items={getAvailableMethods()}
        label="forms.checkout.payment.cardMethod.cardMethod"
        placeholder="forms.checkout.payment.cardMethod.placeholder"
        validate={required}
      />
      {values && values.cardMethod && values.cardMethod === 'other' && (
        <>
          <Field
            component={ProjectInput}
            name="nameOnCard"
            type="string"
            label="forms.paymentMethod.cardHolder"
            validate={composeValidators(required)}
          />
          <StripeInput options={options} />
          <Field
            component={ProjectInput}
            classic
            type="checkbox"
            name="saveCard"
            seed="checkbox"
            label="forms.checkout.payment.saveCard"
          />
        </>
      )}
      <ProjectButton
        disabled={submitting || !valid}
        label="forms.checkout.payment.validation"
        type="submit"
        color="primary"
        right
      />
    </form>
  );
};

export default CheckoutForm;
