Mutations: (edit.jsx)

/* eslint camelcase:0 */
import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";

import { translate, Trans } from "react-i18next";

import {
  Form,
  Input,
  Radio,
  Content,
} from "@ematix/tesseract-component-library";

import {
  DynamicIdentificationDocument,
  SelectQueryCountry,
} from "@ematix/inputSets";

import cls from "./styles.scss";

@translate("FormBasic")
class BasicFormEdit extends React.PureComponent {
  static propTypes = {
    t: PropTypes.func.isRequired,
    basicInfo: PropTypes.instanceOf(Object).isRequired,
    readOnly: PropTypes.bool,
    updatePerson: PropTypes.func.isRequired,
    className: PropTypes.string,
  };

  static defaultProps = {
    readOnly: true,
    className: "",
  };

  render() {
    const {
      className, t, basicInfo, updatePerson,
    } = this.props;
    const {
      first_name,
      middle_name,
      last_name,
      date_of_birth,
      gender,
      place_of_birth,
    } = basicInfo;
    return (
      <Content>
        <Form
          className={classnames(className)}
          readOnly={this.props.readOnly}
          onSubmit={() => {}}
        >
          <div className={cls.twoColumnsWrapper}>
            <div className={cls.gridCol1}>
              <Input
                label={t("Name")}
                name="name"
                onBlur={(e) => {
                  const { target: { value } } = e;
                  updatePerson("firstName", value);
                }}
                defaultValue={first_name}
              />
              <Input
                label={t("Middle Name")}
                name="middle_name"
                defaultValue={middle_name}
                onBlur={(e) => {
                  const { target: { value } } = e;
                  updatePerson("middleName", value);
                }}
              />
              <Input
                label={t("Surname")}
                name="surname"
                defaultValue={last_name}
                onBlur={(e) => {
                  const { target: { value } } = e;
                  updatePerson("lastName", value);
                }}
              />
              <Input
                label={t("Date Of Birth")}
                name="date_of_birth"
                defaultValue={date_of_birth}
                onBlur={(e) => {
                  const { target: { value } } = e;
                  updatePerson("dateOfBirth", value);
                }}
              />
              <label className={cls.genderLabel}>
                <Trans>Gender</Trans>
              </label>
              <div className={cls.radiobtns}>
                <Radio
                  id="r1"
                  type="radio"
                  value="male"
                  defaultChecked={gender === "male"}
                  name="sex"
                  label={t("Male")}
                  onBlur={() => {
                    const maleGlobalId = "RW51bToyNg==";
                    updatePerson("genderGlobalId", maleGlobalId);
                  }}
                />
                <Radio
                  id="r2"
                  type="radio"
                  value="female"
                  defaultChecked={gender === "female"}
                  name="sex"
                  label={t("Female")}
                  onBlur={() => {
                    const femaleGlobalId = "RW51bToyNw==";
                    updatePerson("genderGlobalId", femaleGlobalId);
                  }}
                />
                <Radio
                  id="r3"
                  type="radio"
                  value="other"
                  defaultChecked={gender === "other"}
                  name="sex"
                  label={t("Other")}
                  onBlur={() => {
                    const otherGlobalId = "RW51bToyOA==";
                    updatePerson("genderGlobalId", otherGlobalId);
                  }}
                />
              </div>
              {/* TODO: Appropriate place of birth code */}
              {/* needs to be received in order to set */}
              {/* a correct default value */}
            </div>
            <div className={cls.gridCol2}>
              <SelectQueryCountry defaultValue={place_of_birth} />
              <DynamicIdentificationDocument />
            </div>
          </div>
        </Form>
      </Content>
    );
  }
}

export default BasicFormEdit;