Fragment 1 - EmployeeHeader

/* eslint-disable camelcase */
import React from "react";
import PropTypes from "prop-types";
import { translate } from "react-i18next";
import {
  Input,
  Select,
  Button,
  Avatar,
} from "@ematix/tesseract-component-library";
import { ContentHeader } from "@ematix/components";

import cls from "./employeeHeader.scss";
@translate("EmployeeHeader")
export default class EmployeeHeader extends React.PureComponent {
  static propTypes = {
    position: PropTypes.string,
    status: PropTypes.string,
    phoneNumber: PropTypes.string,
    email: PropTypes.string,
    first_name: PropTypes.string,
    last_name: PropTypes.string,
    middle_name: PropTypes.string,
    t: PropTypes.func.isRequired,
  };
  static defaultProps = {
    position: null,
    status: null,
    phoneNumber: null,
    email: null,
    first_name: null,
    last_name: null,
    middle_name: null,
  };
  state = {
    isEdit: false,
  };

  onClickSetEdit = () => {
    this.setState({
      isEdit: true,
    });
  };
  onClickFinishEdit = () => {
    // __TODO do async stuff
    this.setState({
      isEdit: false,
    });
  };

  render() {
    const {
      position,
      status,
      phoneNumber,
      email,
      first_name,
      last_name,
      middle_name,
      t,
    } = this.props;

    if (this.state.isEdit) {
      return (
        <ContentHeader className={cls.headerEditModeContainer}>
          <div className={cls.clearIcon}>
            <Button icon="clear" clear onClick={this.onClickFinishEdit} />
          </div>
          <Input
            label={t("First Name")}
            name="first_name"
            defaultValue={first_name}
          />
          <Input
            label={t("Middle Name")}
            name="middleName"
            defaultValue={middle_name}
          />
          <Input
            label={t("Surname")}
            name="lastName"
            defaultValue={last_name}
          />
          <Select
            className={cls.selectStatus}
            name="status"
            defaultValue={status}
            label={t("Employee Status")}
            searchable={false}
            options={[
              { value: 1, label: "hello" },
              { value: 2, label: "dog" },
              { value: 3, label: "here" },
            ]}
          />
          <Select
            className={cls.SelectPosition}
            name="position"
            defaultValue={position}
            label={t("Position")}
            searchable={false}
            options={[
              { value: 1, label: "hello" },
              { value: 2, label: "dog" },
              { value: 3, label: "here" },
            ]}
          />
          <Select
            className={cls.phonePreference}
            name="phonePrefrence"
            defaultValue={phoneNumber}
            label={t("Phone Number Preference")}
            searchable={false}
            options={[
              { value: 1, label: "hello" },
              { value: 2, label: "dog" },
              { value: 3, label: "here" },
            ]}
          />
          <Select
            className={cls.emailPreference}
            name="emailPreference"
            defaultValue={email}
            label={t("Email Preference")}
            searchable={false}
            options={[
              { value: 1, label: "hello" },
              { value: 2, label: "dog" },
              { value: 3, label: "here" },
            ]}
          />
        </ContentHeader>
      );
    }

    return (
      <ContentHeader className={cls.contentHeader}>
        <div className={cls.nameContainer}>
          <Avatar className={cls.avatar} alt="">
            {first_name[0]}
            {last_name[0]}
          </Avatar>
          <div className={cls.nameContent}>
            <h2 className={cls.name}>{`${first_name} ${last_name}`}</h2>
            <p className={cls.position}>{position}</p>
          </div>
        </div>
        <div className={cls.details}>
          <span className={cls.phoneNumber}>{phoneNumber}</span>
          <a href={`mailto:${email}`} className={cls.email}>
            {email}
          </a>
          <span className={cls.status}>
            {status}
            <span className={cls.circle} />
          </span>
          <Button
            onClick={this.onClickSetEdit}
            clear
            icon="mode_edit"
            className={cls.editIcon}
          />
        </div>
      </ContentHeader>
    );
  }
}