family_root

import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import { translate, Trans } from "react-i18next";
import { withRouter } from "react-router-dom";
import { graphql, environment } from "@graphql";
import { QueryRenderer } from "react-relay";
import {
  ContentBlock,
  Header,
  Content,
  Icon,
} from "@ematix/tesseract-component-library";
import {
  AdditionalForm,
  FamilyForm,
  JobForm,
  ContactForm,
  BasicForm,
} from "./Forms";

import cls from "./styles.scss";

const query = graphql`
  query BasicInformationQuery($globalId: String!) {
    getEmployee(globalId: $globalId) {
      person {
        ...BasicInformation_basicInfo
        ...AdditionalInformation_additionalInfo
        ...Contact_contactInfo
        ...FamilyInformation_familyInfo
      }
    }
  }
`;

class BasicInformation extends React.PureComponent {
  static propTypes = {
    className: PropTypes.string,
    match: PropTypes.instanceOf(Object).isRequired,
  };

  static defaultProps = {
    className: null,
  };

  state = {
    basicForm: true,
    contactForm: true,
    jobForm: true,
    familyForm: true,
    additionalForm: true,
  };

  formReadOnlyChange = formName => () => {
    this.setState({
      [formName]: !this.state[formName],
    });
  };

  render() {
    const { className } = this.props;
    const employeeId = this.props.match.params.id;
    return (
      <QueryRenderer
        environment={environment}
        variables={{ globalId: employeeId }}
        query={query}
        render={({ error, props: gqlProps }) => {
          if (error) {
            return null;
          }
          if (!gqlProps) {
            return <div>Loading</div>;
          }
          return (
            <div className={classnames(className)}>
              <BasicForm basicInfo={gqlProps.getEmployee.person} />
              <ContactForm contactInfo={gqlProps.getEmployee.person} />
              <ContentBlock>
                <Header className={cls.header}>
                  <h2 className={cls.title}>
                    <Trans>Job Info</Trans>
                  </h2>
                  <Icon
                    className={classnames(cls.edit, {
                      [cls.active]: this.state.jobForm,
                    })}
                    onClick={this.formReadOnlyChange("jobForm")}
                  >
                    edit
                  </Icon>
                </Header>
                <Content>
                  <JobForm readOnly={this.state.jobForm} />
                </Content>
              </ContentBlock>
              <FamilyForm familyInfo={gqlProps.getEmployee.person} />
              <ContentBlock>
                <Header className={cls.header}>
                  <h2 className={cls.title}>
                    <Trans>Additional Information</Trans>
                  </h2>
                  <Icon
                    className={classnames(cls.edit, {
                      [cls.active]: this.state.additionalForm,
                    })}
                    onClick={this.formReadOnlyChange("additionalForm")}
                  >
                    edit
                  </Icon>
                </Header>
                <Content>
                  <AdditionalForm
                    isReadOnly={this.state.additionalForm}
                    variables={{ id: employeeId }}
                  />
                </Content>
              </ContentBlock>
            </div>
          );
        }}
      />
    );
  }
}

export default withRouter(translate("BasicInformation")(BasicInformation));