steak

import React, { Component } from "react";

import InputTextHOC from "../CommonCode/HOC/InputTextHOC";
import InputRadioHOC from "../CommonCode/HOC/InputRadioHOC";

import { Button, Table } from "reactstrap";
import ReactTooltip from "react-tooltip";
import { map, filter, isEmpty } from "lodash";

class AdmissionData extends Component {
  state = {
    add_item_1: "",
    add_item_1Options: [{ value: "Dizzy", label: "Dizzy" }],
    // add_item_2_opt1: '',
    // add_item_2_opt2: '',
    add_item_3: "",
    add_item_4: [],
    checkedValue: "",
    radioData: "",
    disabled: true
  };

  items = {
    add_item_4: {
      type: "table",
      value: this.state.add_item_4, /* Get data from props.data */
      color: "",
      label: this.props.element.ElemCaption,
      datatype: ""
    }
  }

  componentDidMount() {
    //fill add_item_1Options (options od Dx);
    //fill add_item_4 (grid value)
    this.setState({
      radioData: "add_item_2_opt1ᴥConfirmed¿add_item_2_opt2ᴥPresumed"
    });
  }

  handleAddClick = () => {
    let { add_item_4 } = this.state;
    let tempObj = {};
    let editedElement = {};
    let { add_item_1, checkedValue, add_item_3 } = this.state;

    if (checkedValue === "add_item_2_opt1") checkedValue = "Confirmed";
    else if (checkedValue === "add_item_2_opt2") checkedValue = "Presumed";
    else checkedValue = "Confirmed";
    if (!isEmpty(add_item_4)) {
      editedElement = filter(add_item_4, val => {
        return val.Diagnosis === add_item_1;
      });
    }

    if (!isEmpty(editedElement)) {
      editedElement[0].Status = checkedValue;
      editedElement[0].Note = add_item_3;
    } else {
      tempObj = {
        Diagnosis: add_item_1,
        Status: checkedValue,
        Note: add_item_3
      };
      add_item_4.push(tempObj);
    }

    this.setState({
      add_item_1: "",
      checkedValue: "",
      add_item_3: "",
      add_item_4,
      disabled: true
    });
  };

  handleClearClick = () => {
    this.setState({ add_item_1: "", checkedValue: "", add_item_3: "" });
  };

  handleEdit = key => e => {
    let { add_item_4 } = this.state;
    let editedElement = filter(add_item_4, (val, tempKey) => {
      return tempKey === key;
    });
    this.setState({
      add_item_1: editedElement[0].Diagnosis,
      checkedValue:
        editedElement[0].Status === "Confirmed"
          ? "add_item_2_opt1"
          : "add_item_2_opt2",
      add_item_3: editedElement[0].Note
    });
  };

  handleDelete = key => e => {
    let { add_item_4 } = this.state;
    add_item_4.splice(key, 1);
    this.setState({
      add_item_1: "",
      checkedValue: "",
      add_item_3: "",
      add_item_4
    });
  };

  handleSelectChange = name => e => {
    let { disabled } = this.state;
    let value = "";

    if (e && e.value) {
      value = e.value;
    } else {
      value = "";
    }

    if (value && value !== "") disabled = false;
    else disabled = true;

    this.setState({ [name]: value, disabled });
  };

  handleTextChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleCheckChange = e => {
    this.setState({ checkedValue: e.target.value });
  };

  handleSave = () => {
    //save add_item_4 (Grid)
  };

  render() {
    return (
      <div>
        <div className="row">
          <label className="col-12">Diagnosis</label>
        </div>
        <div style={{ color: "silver", marginBottom: "5px" }}>
          Recently used:
        </div>
        <div className="divider-dashed" />
        <div className="row" style={{ color: "silver" }}>
          <label className="col-12">Enter a new diagnosis:</label>
        </div>
        <div className="row">
          <div className="col-12 col-md-4" style={{ marginBottom: "3px" }}>
            <InputTextHOC
              Ele_DataType="typeahead"
              value={this.state.add_item_1}
              placeholder="Diagnosis"
              onChange={this.handleSelectChange("add_item_1")}
              name="add_item_1"
              Creatable={true}
              options={this.state.add_item_1Options}
              dontOpenOnClick={true}
              className="form-control"
            />
          </div>
          <div className="col-6 col-md-3">
            <InputRadioHOC
              radioData={this.state.radioData}
              radioGroupName="add_item_2"
              className="padding-radio-label flat form-control"
              handleCheckChange={this.handleCheckChange}
              getPreviousData={this.state.checkedValue}
            />
          </div>
          <div className="col-12 col-md-3" style={{ marginBottom: "3px" }}>
            <InputTextHOC
              value={this.state.add_item_3}
              className="form-control"
              placeholder="Note"
              onChange={this.handleTextChange}
              name="add_item_3"
            />
          </div>
          <div className="col-2" style={{ marginBottom: "3px" }}>
            <Button
              data-tip
              data-for="confirmation"
              name="add-admissiondata-ok"
              id="add-admissiondata-ok"
              disabled={this.state.disabled}
              onClick={this.handleAddClick}
              className="btn btn-success"
            >
              <i className="fa fa-check" />
            </Button>
            <ReactTooltip id="confirmation">
              <span>Confirmation</span>
            </ReactTooltip>
            {/* </div>
                <div className="col-1" style={{marginBottom: '3px'}}> */}
            <Button
              data-tip
              data-for="clear"
              name="add-admissiondata-clear"
              id="add-admissiondata-clear"
              onClick={this.handleClearClick}
              className="btn btn-danger btn-clear"
            >
              <i className="fa fa-times" />
            </Button>
            <ReactTooltip id="clear">
              <span>Clear</span>
            </ReactTooltip>
          </div>
        </div>
        <div className="divider-dashed" />
        <div className="row x_panel" style={{ marginLeft: "0px" }}>
          <div className="col-12 x_content">
            <Table
              responsive
              className="table table-hover gen-elem"
              id="add_item_4"
            >
              <thead>
                <tr>
                  <th style={{ textAlign: "left", width: "25%" }}>Diagnosis</th>
                  <th style={{ textAlign: "left", width: "35%" }}>Status</th>
                  <th style={{ textAlign: "left", width: "20%" }}>Note</th>
                  <th style={{ textAlign: "left", width: "20%" }} />
                </tr>
              </thead>
              <tbody>
                {map(this.state.add_item_4, (value, key) => {
                  return (
                    <tr key={key}>
                      <td>{value.Diagnosis}</td>
                      <td>{value.Status}</td>
                      <td>{value.Note}</td>
                      <td>
                        {this.state.direction !== "read-only" && [
                          <a
                            key={1}
                            className="actionLink"
                            onClick={this.handleEdit(key)}
                          >
                            Edit
                          </a>,
                          <span key={2}> |&nbsp;</span>,
                          <a
                            key={3}
                            className="actionLink"
                            onClick={this.handleDelete(key)}
                          >
                            <span>Delete</span>
                          </a>
                        ]}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
          </div>
        </div>
      </div>
    );
  }
}

export default AdmissionData;