import PropTypes from 'prop-types'
import React from 'react'
import { Group, Line } from 'react-konva'
import { TILE_PLUS_COLOR } from '../../../../util/colors'
import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'

const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
    const linePoints = [
        [
            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
            pixelY +
            TILE_SIZE_IN_PIXELS * mapScale -
            TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
        ],
        [
            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
            pixelX +
            TILE_SIZE_IN_PIXELS * mapScale -
            TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
        ],
    ]
    return (
        <Group>
            {linePoints.map((points, index) => (
                <Line
                    key={index}
                    points={points}
                    lineCap="round"
                    stroke={TILE_PLUS_COLOR}
                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
                    listening={false}
                />
            ))}
        </Group>
    )
}

TilePlusIcon.propTypes = {
    pixelX: PropTypes.number,
    pixelY: PropTypes.number,
    mapScale: PropTypes.number,
}

export default TilePlusIcon