import React from "react";
import phone from "./phone_new.png";
import computer from "./computer.png";
import "./index.less";
import ComputerTemplate from "./computerTemplate";
import PhoneTemplate from "./phoneTemplate";
import { inject, observer } from "mobx-react";

@inject("payrollStore")
@observer
export default class TemplatePreview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectKey: "0"
    };
  }

  handleSelectClick(selectKey) {
    this.setState({ selectKey });
  }

  render() {
    const { selectKey } = this.state;
    return (
      <div className="templatePreview">
        <div className="headerWrapper">
          <div className="iconsWrapper">
            <div onClick={() => {
              this.handleSelectClick("0");
            }} className={selectKey === "0" ? "iconWrapper activeIconWrapper" : "iconWrapper"}>
              <img src={computer} alt=""/>
            </div>
            <div onClick={() => {
              this.handleSelectClick("1");
            }} className={selectKey === "1" ? "iconWrapper activeIconWrapper" : "iconWrapper"}>
              <img src={phone} alt=""/>
            </div>
          </div>
        </div>

        <div className="contentWrapper">
          {
            this.state.selectKey === "0" ? <ComputerTemplate/> : <PhoneTemplate/>
          }
        </div>
      </div>
    );
  }
}