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} />
                        </div>
                        <div onClick={() => {this.handleSelectClick("1")}} className={selectKey == "1" ? "iconWrapper activeIconWrapper" : "iconWrapper"}>
                            <img src={phone}/>
                        </div>
                    </div>
                </div>

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