text: import {
    clearPlanFilters,
    Connect,
    filterPlans,
  } from '@codetanzania/emis-api-states';
  import { Button, Checkbox, Col, Form, Row } from 'antd';
  import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  
  /**
   * @class
   * @name PlansFilters
   * @description Filter modal component for filtering plans
   *
   * @version 0.1.0
   * @since 0.1.0
   */
  class PlansFilters extends Component {
    /**
     * @function
     * @name handleSubmit
     * @description Handle filter action
     *
     * @param {object} event onSubmit event object
     *
     * @version 0.1.0
     * @since 0.1.0
     */
    handleSubmit = event => {
      event.preventDefault();
      const {
        form: { validateFields },
        onCancel,
      } = this.props;
  
      validateFields((error, values) => {
        if (!error) {
          filterPlans(values);
          onCancel();
        }
      });
    };
  
    /**
     * @function
     * @name handleClearFilter
     * @description Action handle when clear
     *
     * @version 0.1.0
     * @since 0.1.0
     */
    handleClearFilter = () => {
      const { onCancel } = this.props;
      clearPlanFilters();
      onCancel();
    };
  
    render() {
      const {
        form: { getFieldDecorator },
        onCancel,
        types,
        phases,
        filter,
      } = this.props;
  
      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 24 },
          md: { span: 24 },
          lg: { span: 24 },
          xl: { span: 24 },
          xxl: { span: 24 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
          md: { span: 24 },
          lg: { span: 24 },
          xl: { span: 24 },
          xxl: { span: 24 },
        },
      };
  
      return (
        <Form onSubmit={this.handleSubmit}>
          {/* start plan type filters */}
          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
          <Form.Item {...formItemLayout} label="By Plan type">
            {getFieldDecorator('type', {
              initialValue: filter ? filter.type : [],
            })(
              <Checkbox.Group style={{ width: '100%' }}>
                <Row>
                  {types.map(type => (
                    <Col span={6} style={{ margin: '10px 0' }} key={type}>
                      <Checkbox value={type}>{type}</Checkbox>
                    </Col>
                  ))}
                </Row>
              </Checkbox.Group>
            )}
          </Form.Item>
          {/* end plan type filters */}
  
          {/* start emergency phase filters */}
          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
          <Form.Item {...formItemLayout} label="By Emergency Phases">
            {getFieldDecorator('phases', {
              initialValue: filter ? filter.phases : [],
            })(
              <Checkbox.Group style={{ width: '100%' }}>
                <Row>
                  {phases.map(phase => (
                    <Col span={6} style={{ margin: '10px 0' }} key={phase}>
                      <Checkbox value={phase}>{phase}</Checkbox>
                    </Col>
                  ))}
                </Row>
              </Checkbox.Group>
            )}
          </Form.Item>
          {/* end emergency phase filters */}
  
          {/* form actions */}
          <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
            <Button onClick={onCancel}>Cancel</Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleClearFilter}>
              Clear
            </Button>
            <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
              Filter
            </Button>
          </Form.Item>
          {/* end form actions */}
        </Form>
      );
    }
  }
  
  PlansFilters.propTypes = {
    filter: PropTypes.objectOf(
      PropTypes.shape({
        types: PropTypes.arrayOf(PropTypes.string),
        phases: PropTypes.arrayOf(PropTypes.string),
      })
    ),
    form: PropTypes.shape({
      getFieldDecorator: PropTypes.func,
      validateFields: PropTypes.func,
    }).isRequired,
    onCancel: PropTypes.func.isRequired,
    types: PropTypes.arrayOf(PropTypes.string).isRequired,
    phases: PropTypes.arrayOf(PropTypes.string).isRequired,
  };
  
  PlansFilters.defaultProps = {
    filter: null,
  };
  
  export default Connect(Form.create()(PlansFilters), {
    types: 'plans.schema.properties.type.enum',
    phases: 'plans.schema.properties.phases.enum',
    filter: 'plans.filter',
  });
  