Add toggle to forms

/* eslint-disable camelcase */
import React from "react";
import PropTypes from "prop-types";
import { translate } from "react-i18next";

import {
  Form,
  Input,
  Checkbox,
  DynamicInputField,
  Select,
} from "@ematix/tesseract-component-library";

import cls from "./salary.scss";
import TwoColumnWrapper from "../../TwoColumnWrapper";

class EditMode extends React.PureComponent {
  static propTypes = {
    name: PropTypes.string,
    defaultValues: PropTypes.instanceOf(Object),
    t: PropTypes.func.isRequired,
  };
  static defaultProps = {
    name: "salary_form",
    defaultValues: {},
  };

  constructor(props, ...args) {
    super(props, ...args);

    const {
      defaultValues: { salary_name, email_employment, name_employment },
    } = props;

    let isEmploymentAgency = false;
    if (salary_name || email_employment || name_employment) {
      isEmploymentAgency = true;
    }

    this.state = {
      isEmploymentAgency,
    };
  }

  handleToggleEmploymentAgency = () => {
    const { isEmploymentAgency } = this.state;
    this.setState({
      isEmploymentAgency: !isEmploymentAgency,
    });
  };

  render() {
    const { t, name, defaultValues } = this.props;
    const { isEmploymentAgency } = this.state;
    const getName = inputName => `${name || "salary_form"}[${inputName}]`;
    return (
      <Form onSubmit={() => {}}>
        <TwoColumnWrapper>
          <div className={cls.gridColLeft}>
            <div className={cls.salaryPart}>
              <Input label={t("Gross Salary")} className={cls.salary} />
              <Select name="select" label={t("Currency")} options={[]} />
            </div>
            <DynamicInputField
              name="fields"
              label={t("Financial Bonuses")}
              className={cls.bonuses}
            />
            <DynamicInputField
              name="fields"
              label={t("Benefits")}
              className={cls.benefits}
            />
          </div>
          <div className={cls.gridColRight}>
            <Select
              name="select"
              label={t("Pension")}
              options={[]}
              className={cls.pension}
            />
            <div className={cls.checkBox}>
              <Checkbox
                label={t("Employment Agency")}
                name="employmentAgency"
                id="employmentAgency"
                onChange={this.handleToggleEmploymentAgency}
                defaultChecked={isEmploymentAgency}
              />
            </div>
            {isEmploymentAgency && (
              <div>
                <Input
                  label={t("Name")}
                  className={cls.name}
                  name={getName("NAME")}
                  defaultValue={defaultValues.name_employment}
                />
                <Input
                  label={t("Email")}
                  className={cls.email}
                  name={getName("EMAIL")}
                  defaultValue={defaultValues.email_employment}
                />
              </div>
            )}
          </div>
        </TwoColumnWrapper>
      </Form>
    );
  }
}

export default translate("EditMode")(EditMode);