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

// COMPONENTS
import { Inputs, InputTextArea, Radio, DatePicker } from 'components/Forms';

// HELPER FUNCTIONS

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

function AddNotificationForm(props) {
  const { 
    isSubmitting, 
    handleSubmit, 
    loading, 
    history, 
    schedule, 
    handleScheduleStatus  
  } = props;
  return (
    <Form noValidate>
      <HeaderForm
        isInsideForm
        loading={loading}
        disabled={props.isValid == false ? true : false}
        title='Add Notification'
        action={handleSubmit}
        actionBtnName='Submit'
        withCancelConfirm={{ message: 'Are you sure you want to discard changes?' }}
        cancel={() => {
          history.push('/notifications');
        }}
        cancelBtnName='Cancel'
      />

      <Field
        name='subject'
        type='text'
        layout={formItemLayout}
        label='Subject'
        placeholder='Subject'
        component={Inputs}
      />

      <Field
        name='content'
        type='textarea'
        layout={formItemLayout}
        label='Content'
        placeholder='Content'
        component={InputTextArea}
      />

      <Field
        name='isScheduled'
        layout={formItemLayout}
        optionsList={[
          {
            label: 'No',
            value: 'false',
          },
          {
            label: 'Yes',
            value: 'true',
          },
        ]}
        label='Schedule'
        component={Radio}
        handleScheduleStatus={handleScheduleStatus}
      />
      {
        (schedule === 'false')?
        <div></div>
        :
        <div>
          <Field
            name="schedule"
            type="date-time"
            layout={formItemLayout}
            label="Schedule"
            placeholder="Schedule"
            component={DatePicker}
          />
          <Field
            name="expiration"
            type="date-time"
            layout={formItemLayout}
            label="Expiration"
            placeholder="Expiration"
            component={DatePicker}
          />
        </div>
      }
      
    </Form>
  );
}

AddNotificationForm = connect((state) => ({}))(AddNotificationForm);

export default AddNotificationForm;
