import App from '../app'

import angle from './world-angle'

const CANVAS_WIDTH = 1920
const CANVAS_HEIGHT = 720

const GRADUS = Math.PI / 180

const hypot = Math.hypot || ((a, b) => Math.sqrt(a * a + b * b))

export default class World {
    constructor() {
        this.units = []
        this.angle = angle

        this.RADIUS = 4000
        this.CENTER_X = CANVAS_WIDTH / 2
        this.CENTER_Y = this.RADIUS + 200

        this.hoveredSector = null
        this.selectedSector = null
        this.drawAreasWithResources = false

        this.areas = []
    }

    draw(ctx) {
        ctx.fillStyle = 'rgb(210, 234, 252)'
        ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)

        // rotate
        ctx.translate(this.CENTER_X, this.CENTER_Y)
        ctx.rotate(this.angle.get() * GRADUS)
        ctx.translate(-this.CENTER_X, -this.CENTER_Y)

        // horizont
        ctx.fillStyle = '#fff'
        ctx.beginPath()
        ctx.arc(this.CENTER_X, this.CENTER_Y, this.RADIUS, 0, 2 * Math.PI)
        ctx.stroke()
        ctx.fill()

        // draw areas and buildings
        const sectorsCount = this.areas.length
        const rotationAngle = (180 / sectorsCount) * GRADUS * 2
        this.areas.forEach((area, i) => {
            ctx.save()

            ctx.translate(this.CENTER_X, this.CENTER_Y)
            ctx.rotate(rotationAngle * i)
            ctx.translate(-this.CENTER_X, -this.CENTER_Y)

            ctx.translate(this.CENTER_X, this.CENTER_Y - this.RADIUS)

            area.draw(ctx, this.drawAreasWithResources)

            if (this.hoveredSector === i) {
                ctx.fillStyle = 'rgba(210, 234, 252, .5)'
                ctx.fillRect(-70, -60, 140, 61)
            }

            if (this.selectedSector === i) {
                ctx.fillStyle = 'rgba(210, 234, 252, .5)'
                ctx.fillRect(-70, -60, 140, 61)
            }

            ctx.restore()
        })

        // restore
        ctx.resetTransform()
    }

    update(dt) {
        this.angle.update(dt)
        this.areas.forEach(area => {
            area.update(dt)
        })
    }

    hoverSector(sector) {
        this.hoveredSector = sector
    }

    hoverObject(_x, _y) {
        const x = _x - this.CENTER_X
        const y = _y - this.CENTER_Y

        const distance = hypot(x, y)

        const between = (val, min, max) => val >= min && val <= max
        if (between(distance - this.RADIUS, -40, 100)) {
            const sectorLength = 360 / this.areas.length
            let angle = Math.atan2(x, -y) * 180 / Math.PI + sectorLength / 2

            angle = angle - this.angle.get()
            angle = angle % 360
            if (angle < 0) angle = 360 + angle

            this.hoveredSector = ~~(angle / sectorLength)
        }
        else {
            this.hoveredSector = null
        }
    }

    loadNew(count) {

        const PROBABILITY_OF_OCCURRENCE = {
            'FIELD': 50,
            'FOREST': 20,
            'MOUNTAINS': 20,
            'WATER': 10
        }

        this.areas = []

        for (let i = 0; i < count; i++) {
            const rand = Math.random() * 100

            let probability = 0
            for (let type in PROBABILITY_OF_OCCURRENCE) {
                probability += PROBABILITY_OF_OCCURRENCE[type]
                if (rand < probability) {
                    this.areas.push(App.makeArea(type))
                    break
                }
            }
        }
    }
}
