edit (fragment)

/* eslint camelcase:0 */

import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";

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

import cls from "./styles.scss";

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

  static defaultProps = {
    readOnly: true,
    className: "",
  };
  render() {
    const { className, t, additionalInfo } = this.props;
    const {
      insurance_company,
      insurance_number,
      date_last_medical_check,
      blood_type,
      health_issues,
    } = additionalInfo;
    return (
      <Content>
        <Form
          className={classnames(className)}
          readOnly={this.props.readOnly}
          onSubmit={() => {}}
        >
          <div className={cls.twoColumnsWrapper}>
            <div className={cls.leftCol}>
              <div className={cls.licenses}>
                <Input
                  label={t("Driving license number")}
                  name="license_number"
                />
                <Input label={t("Driving license type")} name="license_type" />
              </div>
              <Input label={t("Other Employment")} name="other" />
              <Input label={t("Previous Employment")} name="previousEmployer" />
              <Input
                className={cls.safetyTraining}
                label={t("Safety training")}
                name="safety_training"
                iconDate
              />
            </div>
            <div className={cls.rightCol}>
              <Input
                label={t("Health insurance company")}
                name="insurance_company"
                defaultValue={insurance_company}
              />
              <Input
                label={t("Insurance registration number")}
                name="insurance_company"
                defaultValue={insurance_number}
              />
              <div className={cls.checkups}>
                <Input
                  label={t("Medical checkup")}
                  name="medical_checkup"
                  defaultValue={date_last_medical_check}
                  iconDate
                />
                <Input label={t("Next checkup")} name="next_checkup" iconDate />
              </div>
              <Input
                label={t("Blood type")}
                name="blood_type"
                defaultValue={blood_type}
              />
              <div className={cls.addInfoField}>
                <Input
                  label={t("Additional information")}
                  name="additional_info"
                  defaultValue={health_issues}
                />
              </div>
            </div>
          </div>
        </Form>
      </Content>
    );
  }
}

export default AdditionalEdit;