import React 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 StripInput from 'components/formItems/StripeInput';
import { required, email, composeValidators } from 'store/utils/validation';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';

import styleIdentifiers from './addPaymentMethodForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type AddPaymentMethodFormProps = StateProps & DispatchProps & OwnProps;

const AddPaymentMethodForm = (props: AddPaymentMethodFormProps) => {
  const { handleSubmit, submitting, valid } = props;

  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);

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

  return (
    <form className={styles('add-payment-method-form')} onSubmit={handleSubmit}>
      <Field
        component={ProjectInput}
        name="nameOnCard"
        label="forms.paymentMethod.cardHolder"
        validate={required}
      />
      <StripInput options={options} />
      <Field
        component={ProjectInput}
        classic
        name="default"
        type="checkbox"
        seed="checkbox"
        label="forms.paymentMethod.default"
      />

      <ProjectButton
        disabled={submitting || !valid}
        label="forms.paymentMethod.save"
        type="submit"
        color="primary"
      />
    </form>
  );
};

export default AddPaymentMethodForm;
