import React from "react";
import moment from "moment";
import { inject, observer } from "mobx-react";

@inject("payrollStore")
@observer

export default class ComputerTemplate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      salaryItemSet: [],
      salaryTemplateShowSet: {
        theme: "",
        background: "",
        textContentPosition: "",
        textContent: ""
      }
    };
  }


  componentWillMount() {
    if (this.props.isPreview) return;
    let salaryTemplateShowSetStr = window.localStorage.getItem("salary-showset") || "{}";
    let salaryItemSetStr = window.localStorage.getItem("salaryItemSet") || "{}";
    this.setState({
      salaryItemSet: JSON.parse(salaryItemSetStr),
      salaryTemplateShowSet: JSON.parse(salaryTemplateShowSetStr)
    });
  }

  componentDidMount() {
    if (this.props.isMsgPreview && this.props.salaryItemSet) {
      this.setState({
        salaryItemSet: JSON.parse(this.props.salaryItemSet),
        salaryTemplateShowSet: JSON.parse(this.props.salaryTemplateShowSet)
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.salaryTemplateShowSet !== this.props.salaryTemplateShowSet) {
      this.setState({
        salaryItemSet: JSON.parse(nextProps.salaryItemSet),
        salaryTemplateShowSet: JSON.parse(nextProps.salaryTemplateShowSet)
      });
    }
  }


  renderTableTr = (data, groupId) => {
    const tables = [];
    const len = data.length;
    const rowNum = 3;
    const sumRows = len % rowNum;
    const sumRowMod = len / rowNum;
    const rows = (sumRows == 0 ? sumRowMod : parseInt(sumRowMod.toString()) + 1);
    for (let j = 0; j < rows; j++) {
      let iLen = (j + 1) * rowNum;
      iLen = iLen > len ? len : iLen;
      tables.push("<tr class='descriptions-row'>");
      for (let i = j * rowNum; i < iLen; i++) {
        const key = (!this.props.isPreview && groupId !== "111111111111111111") ? data[i].salaryItemShowName : data[i].name;
        const value = data[i].salaryItemValue || "-";
        tables.push("<th class=\"descriptions-item-label\">" + key + "</th>" + "<td class=\"descriptions-item-content\">" + value + "</td>");
      }
      tables.push("</tr>");
    }
    return tables;
  };

  render() {
    const { salaryTemplateShowSet, salaryItemSet } = this.state;
    return (
      <div className="computerTemplate">
        {salaryTemplateShowSet.theme &&
          <div className="titleWrapper">
            {salaryTemplateShowSet.theme.replace("${companyName}", "").replace("${salaryMonth}", moment(new Date()).format("YYYY-MM"))}
          </div>
        }
        {/*{*/}
        {/*  salaryTemplateShowSet.background && <div className="background-wrapper">*/}
        {/*    <img className="background-img" src={salaryTemplateShowSet.background} alt=""/>*/}
        {/*  </div>*/}
        {/*}*/}

        <div className="sobItemDiv" style={{ margin: "20px 10px" }}>
          {
            salaryTemplateShowSet.textContentPosition == 1 && salaryTemplateShowSet.textContent
          }
        </div>

        <div className="sobItemWrapper">
          {
            salaryItemSet.length > 0 &&
            salaryItemSet.map((group, index) => {
              return <div className="sobItem">
                <div className="descript-title">{group.groupName}</div>
                <div className="descriptions-view">
                  <table
                    dangerouslySetInnerHTML={{ __html: this.renderTableTr(group.items, group.groupId).join(",").replace(/,/g, "") }}/>
                </div>
              </div>;
            })
          }
        </div>
        <div style={{ margin: "20px 10px" }}>
          {
            salaryTemplateShowSet.textContentPosition == 2 && salaryTemplateShowSet.textContent
          }
        </div>
        {this.props.children}
      </div>
    );
  }
}