import PropTypes from 'prop-types'
import React from 'react'
import { Layer } from 'react-konva'
import HoverTile from '../elements/HoverTile'
import { TILE_SIZE_IN_PIXELS } from '../MapConstants'

class HoverLayerComponent extends React.Component {
    static propTypes = {
        mouseX: PropTypes.number.isRequired,
        mouseY: PropTypes.number.isRequired,
        mapPosition: PropTypes.object.isRequired,
        mapScale: PropTypes.number.isRequired,
        isEnabled: PropTypes.func.isRequired,
        onClick: PropTypes.func.isRequired,
    }

    state = {
        positionX: -1,
        positionY: -1,
        validity: false,
    }

    componentDidUpdate() {
        if (!this.props.isEnabled()) {
            return
        }

        const positionX = Math.floor(
            (this.props.mouseX - this.props.mapPosition.x) /
            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
        )
        const positionY = Math.floor(
            (this.props.mouseY - this.props.mapPosition.y) /
            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
        )

        if (
            positionX !== this.state.positionX ||
            positionY !== this.state.positionY
        ) {
            this.setState({
                positionX,
                positionY,
                validity: this.props.isValid(positionX, positionY),
            })
        }
    }

    render() {
        if (!this.props.isEnabled()) {
            return <Layer/>
        }

        const pixelX =
            this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS +
            this.props.mapPosition.x
        const pixelY =
            this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS +
            this.props.mapPosition.y

        return (
            <Layer opacity={0.6}>
                <HoverTile
                    pixelX={pixelX}
                    pixelY={pixelY}
                    scale={this.props.mapScale}
                    isValid={this.state.validity}
                    onClick={() =>
                        this.state.validity
                            ? this.props.onClick(this.state.positionX, this.state.positionY)
                            : undefined}
                />
                {this.props.children
                    ? React.cloneElement(this.props.children, {
                        pixelX,
                        pixelY,
                        scale: this.props.mapScale,
                    })
                    : undefined}
            </Layer>
        )
    }
}

export default HoverLayerComponent