text: import { Button, Form } from 'antd';
  import { Formik } from 'formik';
  import { i18n } from 'i18n';
  import model from 'modules/patient/patientModel';
  import React, { Component } from 'react';
  import ViewFormItem from 'view/shared/form/items/ViewFormItem';
  import Spinner from 'view/shared/Spinner';
  import FormWrapper, {
    tailFormItemLayout,
  } from 'view/shared/styles/FormWrapper';
  import FormSchema from 'view/shared/form/formSchema';
  import InputFormItem from 'view/shared/form/items/InputFormItem';
  import RadioFormItem from 'view/shared/form/items/RadioFormItem';
  import DatePickerFormItem from 'view/shared/form/items/DatePickerFormItem';
  
  const { fields } = model;
  
  class PatientForm extends Component {
    schema = new FormSchema(fields.id, [
      fields.name,
      fields.birthdate,
      fields.gender,
      fields.phone,
    ]);
  
    handleSubmit = (values) => {
      const { id, ...data } = this.schema.cast(values);
      this.props.onSubmit(id, data);
    };
  
    initialValues = () => {
      const record = this.props.record;
      return this.schema.initialValues(record || {});
    };
  
    renderForm() {
      const { saveLoading, isEditing } = this.props;
  
      return (
        <FormWrapper>
          <Formik
            initialValues={this.initialValues()}
            validationSchema={this.schema.schema}
            onSubmit={this.handleSubmit}
            render={(form) => {
              return (
                <Form onSubmit={form.handleSubmit}>
                  {isEditing && (
                    <ViewFormItem
                      name={fields.id.name}
                      label={fields.id.label}
                    />
                  )}
  
                  <InputFormItem
                    name={fields.name.name}
                    label={fields.name.label}
                    required={fields.name.required}
                    autoFocus
                  />
                  <DatePickerFormItem
                    name={fields.birthdate.name}
                    label={fields.birthdate.label}
                    required={fields.birthdate.required}
                  />
                  <RadioFormItem
                    name={fields.gender.name}
                    label={fields.gender.label}
                    options={fields.gender.options.map(
                      (item) => ({
                        value: item.id,
                        label: item.label,
                      }),
                    )}
                    required={fields.gender.required}
                  />
                  <InputFormItem
                    name={fields.phone.name}
                    label={fields.phone.label}
                    required={fields.phone.required}
                  />
  
                  <Form.Item
                    className="form-buttons"
                    {...tailFormItemLayout}
                  >
                    <Button
                      loading={saveLoading}
                      type="primary"
                      onClick={form.handleSubmit}
                      icon="save"
                    >
                      {i18n('common.save')}
                    </Button>
  
                    <Button
                      disabled={saveLoading}
                      onClick={form.handleReset}
                      icon="undo"
                    >
                      {i18n('common.reset')}
                    </Button>
  
                    {this.props.onCancel ? (
                      <Button
                        disabled={saveLoading}
                        onClick={() => this.props.onCancel()}
                        icon="close"
                      >
                        {i18n('common.cancel')}
                      </Button>
                    ) : null}
                  </Form.Item>
                </Form>
              );
            }}
          />
        </FormWrapper>
      );
    }
  
    render() {
      const { isEditing, findLoading, record } = this.props;
  
      if (findLoading) {
        return <Spinner />;
      }
  
      if (isEditing && !record) {
        return <Spinner />;
      }
  
      return this.renderForm();
    }
  }
  
  export default PatientForm;
  