// Copyright 2020 Thomas Hintz
//
// This file is part of the Alpha Centauri Farming project.
//
// The Alpha Centauri Farming project is free software: you can
// redistribute it and/or modify it under the terms of the GNU General
// Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// The Alpha Centauri Farming project is distributed in the hope that
// it will be useful, but WITHOUT ANY WARRANTY; without even the
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
// PURPOSE.  See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with the Alpha Centauri Farming project.  If not, see
// <https://www.gnu.org/licenses/>.

import React from 'react'
import { connect } from 'react-redux'

import PlayerIcon from './PlayerIcon.jsx'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCreditCard, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'

import { setMessagePanelSpace, mpMouse } from './actions.js'


              //    onMouseOver={evt => {
              //        const clientRects = evt.target.getClientRects()[0];
              //        this.props.setMessagePanelSpace(space);
              //        this.props.mpMouse(clientRects.left, clientRects.top);
              // return false; } }

class SpaceNode extends React.Component {
    myRef = React.createRef();
    mouseOver = (e) => {
        e.preventDefault();
        const clientRects = this.myRef.current.getClientRects()[0];
        this.props.setMessagePanelSpace(this.props.space);
        this.props.mpMouse(clientRects.left, clientRects.top);
    }

    mouseOut = (e) => {
        e.preventDefault();
        this.props.setMessagePanelSpace(null);
    }
    /* onMouseOver={this.mouseOver}
     * onMouseOut={this.mouseOut} */
    render() {
        const space = this.props.space;
        let title = '';
        if (this.props.showtitle) {
            switch (this.props.space.type) {
            case 'hay': title = 'Hay Cutting'; break;
            case 'cherry': title = 'Cherry Harvest'; break;
            case 'wheat': title = 'Wheat Harvest'; break;
            case 'cows': title = 'Livestock Sales'; break;
            case 'apple': title = 'Apple Harvest'; break;
            case 'corn': title = 'Corn Harvest'; break;
            case 'buy': title = 'Purchasing'; break;
            }
        }
        return (
            <div className={'space space-type-' + this.props.space.type +
                 ' space-orientation-' + this.props.orientation}
                 ref={this.myRef}
              >
                <div style={this.props.height ? {height: this.props.height} : {}}>
                <center>{this.props.space.month}</center>
                { this.props.showtitle ? (
                    <div className='space-title'>
                        {title}
                    </div>)
                  : (null)}
            { this.props.space.players.length ? <PlayerIcon colors={this.props.space.players} current={this.props.current} /> : ''}
                    <div className='space-description'>
                {this.props.space.description}
            </div>
                {this.props.showIcons && space.card === 'otb' ? (<div className='space-icon'><FontAwesomeIcon icon={faCreditCard} /></div>) : (<></>)}
            {this.props.showIcons && space.card === 'fate' ? (<div className='space-icon'><FontAwesomeIcon icon={faQuestionCircle} /></div>) : (<></>)}
                </div>
            </div>
    );
  }
}

export default connect(
    null,
    { setMessagePanelSpace, mpMouse }
)(SpaceNode)
