index (fragment)

import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import {
  ContentBlock,
  Header,
  Icon,
} from "@ematix/tesseract-component-library";

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

import AdditionalFormContainer from "./fragments/Additional";

import cls from "../../styles.scss";

@translate("BasicInformation")
class AdditionalForm extends React.PureComponent {
  static propTypes = {
    additionalInfo: PropTypes.instanceOf(Object).isRequired,
  };

  state = {
    readOnly: true,
  };

  toggleReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly,
    });
  };

  render() {
    const { additionalInfo } = this.props;
    return (
      <ContentBlock>
        <Header className={cls.header}>
          <h2 className={cls.title}>
            <Trans>Additional Information</Trans>
          </h2>
          <Icon
            className={classnames(cls.edit, {
              [cls.active]: this.state.readOnly,
            })}
            onClick={this.toggleReadOnly}
          >
            edit
          </Icon>
        </Header>
        <AdditionalFormContainer
          additionalInfo={additionalInfo}
          readOnly={this.state.readOnly}
        />
      </ContentBlock>
    );
  }
}

export default AdditionalForm;