// LIBRARIES
import React from 'react';
import { Row, Button, Col } from 'antd';
import { Form, Field } from 'formik';
import { connect } from 'react-redux';

// COMPONENTS
import HeaderForm from "components/Forms/HeaderForm"
import { Inputs, Checkbox, Radio, UploadImage, InputTextArea, SingleUploadImage } from 'components/Forms';

// HELPER FUNCTIONS


const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
};

function AddCardForm(props) {
  const {
    isSubmitting,
    handleSubmit,
    loading,
    handleFileUpload,
    handleFileUploadBackground,
    history
  } = props;

  return (
    <Form noValidate>
      <HeaderForm 
        isInsideForm
        loading={loading}
        disabled={props.isValid == false ? true : false}
        title="Card Types"
        action={handleSubmit}
        actionBtnName="Submit"
        withCancelConfirm={{ message: 'Are you sure you want to discard changes?'}}
        cancel={()=> {history.push("/about-us/card-types")}}
        cancelBtnName="Cancel"
      />
      <Field
        name="code"
        type="text"
        //icon="user"
        layout={formItemLayout}
        label="Card Code"
        placeholder="Card Code"
        component={Inputs}
      />

      <Field
        name="type"
        type="text"
        //icon="user"
        layout={formItemLayout}
        label="Card Type Description"
        placeholder="Card Type Description"
        component={Inputs}
      />

        <Field
          onCountText
          charsperpage={140}
          maxLength="140"
          style={{marginBottom: '10px'}}
          name="description"
          type="text"
          icon=""
          layout={formItemLayout}
          label="Card Type Short Description"
          placeholder="Card Type Short Description"
          rows={4}
          component={InputTextArea}
        />

       <Field
        limit100kb
        name="image"
        type="file"
        accept=".jpg , .png, .gif"
        notAcceptedImg={["image/gif"]}
        multiple={false}
        imageUrl={props.values.image && `${props.values.image}`}
        className="upload-list-inline"
        icon="user"
        layout={formItemLayout}
        label="Upload Card Type Image"
        placeholder="Upload Card Type Image"
        component={SingleUploadImage}
        imgWidth="294px"
        handleFileUpload={handleFileUpload}
      />
    
      <Field
        name="virtual_card_font_color"
        icon=""
        layout={formItemLayout}
        optionsList={[
          {
            label: "White",
            value: 1
          },
          {
            label: "Black",
            value: 2,
          }
        ]}
        label="Virtual Card Font Color"
        component={Radio}
      />

      <Field
        limit100kb
        name="bg_image"
        type="file"
        multiple={false}
        notAcceptedImg={["image/gif"]}
        isRatioMessage={{isRatioMessage: 'Image Size (ex. 375 x 260).'}}
        imageUrl={props.values.image && `${props.values.bg_image}`}
        className="upload-list-inline"
        icon="user"
        layout={formItemLayout}
        label="Upload Card Type Cover Image"
        placeholder="Upload Card Type Cover Image"
        component={SingleUploadImage}
        imgWidth="294px"
        handleFileUpload={handleFileUploadBackground}
      />
     
      <Field
        name="id_number"
        icon=""
        layout={formItemLayout}
        optionsList={[
          {
            label: "Yes",
            value: 1
          },
          {
            label: "No",
            value: 2,
          }
        ]}
        label="ID Number Required?"
        component={Radio}
      />

      <Field
        onCountText
        charsperpage={40}
        maxLength="40"
        style={{marginBottom: '10px'}}
        disabled={props.values.id_number && props.values.id_number == 2 ? true: false}
        name="id_number_description"
        type="text"
        icon=""
        layout={formItemLayout}
        label="ID Number Description"
        placeholder="ID Number Description"
        rows={2}
        component={InputTextArea}
      />
      
      <h4 style={{marginLeft: '190px'}}>DATA PRIVACY</h4>
      <Field
        name="terms_and_conditions"
        type="text"
        icon=""
        layout={formItemLayout}
        label={`Terms & Conditions`}
        placeholder={`Terms & Conditions`}
        rows={10}
        component={InputTextArea}
      />
      <Field
        name="faqs"
        type="text"
        icon=""
        layout={formItemLayout}
        label="FAQs"
        placeholder="FAQs"
        rows={10}
        component={InputTextArea}
      />
    </Form>
  );
};


AddCardForm = connect(
  state => ({
    
  }),
)(AddCardForm);


export default AddCardForm;

