import Quest from "./quest";

enum STATES {
	READY,
	RESET,
	DONE,
}

const LOW_VALUE = 0.65
const HIGH_VALUE = 0.89

export default class StartEnergy extends Quest {

	private state: STATES = STATES.READY

	private val1: number = 0
	private val2: number = 0

	private btn1Pressed: boolean = false
	private btn2Pressed: boolean = false
	private btn3Pressed: boolean = false

	private ready: boolean = false
	private readyTimeout: number = 2000

	public draw(ctx: CanvasRenderingContext2D) {
		ctx.font = 'bold 24px sans-serif'
		ctx.fillStyle = '#fff'
		ctx.textAlign = 'left'

		ctx.fillText('S1', 50, 95)
		this.drawBar(ctx, 100, this.val1)

		ctx.fillStyle = '#fff'
		ctx.fillText('S2', 50, 295)
		this.drawBar(ctx, 300, this.val2)

		this.drawBtn(ctx, 100, 500, this.btn1Pressed)
		this.drawBtn(ctx, 320, 500, this.btn2Pressed)
		this.drawBtn(ctx, 540, 500, this.btn3Pressed)
	}

	public drawBar(ctx: CanvasRenderingContext2D, offset, val) {
		const offset_x = -20

		ctx.fillStyle = '#291214'
		ctx.fillRect(530 + offset_x, offset, 60, 100)

		ctx.fillStyle = '#0d2810'
		ctx.fillRect(400 + offset_x, offset, 130, 100)

		ctx.fillStyle = '#25250d'
		ctx.fillRect(50 + offset_x, offset, 350, 100)

		ctx.fillStyle =
			val < LOW_VALUE ? '#dfdd33' :
			val < HIGH_VALUE ? '#44de30' :
			'#df3033'

		const w = 10 + Math.min(1, val) * 530
		ctx.fillRect(50 + offset_x, offset, w, 100)

		ctx.strokeStyle = 'silver'
		ctx.moveTo(570 + offset_x, offset)
		ctx.lineTo(570 + offset_x + 20, offset)
		ctx.lineTo(570 + offset_x + 20, offset + 20)
		ctx.stroke()

		ctx.moveTo(570 + offset_x + 20, offset + 80)
		ctx.lineTo(570 + offset_x + 20, offset + 100)
		ctx.lineTo(570 + offset_x, offset + 100)
		ctx.stroke()
	}

	public drawBtn(ctx: CanvasRenderingContext2D, offset_x, offset_y, on: boolean = false) {
		ctx.fillStyle = '#21282a'
		ctx.fillRect(offset_x, offset_y, 30, 30)

		ctx.fillStyle = on ? '#45de36' : '#de3636'
		ctx.fillRect(offset_x + 7, offset_y + 7, 16, 16)

		ctx.fillStyle = '#21282a'
		ctx.beginPath()
		ctx.arc(offset_x + 15, offset_y + 80, 20, 0, 2 * Math.PI)
		ctx.fill()

		ctx.fillStyle = 'yellow'
		ctx.beginPath()
		ctx.arc(offset_x + 15, offset_y + 80, 7, 0, 2 * Math.PI)
		ctx.fill()
	}

	public reset() {
		this.state = STATES.RESET
		this.btn1Pressed = false
		this.btn2Pressed = false
		this.btn3Pressed = false

		this.showMessage('Перегрузка')
	}

	public update(dt) {
		if (this.btn1Pressed && !this.btn2Pressed) {
			this.val1 += dt / 2000
			if (this.val1 > 1) {
				this.reset()
			}
		}

		if (this.btn2Pressed && !this.btn3Pressed) {
			this.val2 += dt / 2000
			if (this.val2 > 1) {
				this.reset()
			}
		}

		if (this.btn3Pressed) {
			if (this.val1 > LOW_VALUE && this.val1 < HIGH_VALUE && this.val2 > LOW_VALUE && this.val2 < HIGH_VALUE) {
				this.state = STATES.DONE
				this.showMessage('Запущено')
			} else {
				this.reset()
			}
		}

		if (this.state === STATES.RESET) {
			this.val1 = Math.max(0, this.val1 - dt / 1000)
			this.val2 = Math.max(0, this.val2 - dt / 1000)

			if (this.val1 === 0 && this.val2 === 0) {
				this.state = STATES.READY
			}
		}

		if (this.state === STATES.DONE) {
			this.readyTimeout -= dt
			this.ready = this.readyTimeout < 0
		}
	}

	public click(x, y) {
		if (this.state !== STATES.READY) {
			return
		}

		const offset_y = 500

		if (x > 100 && x < 100 + 30 && y > offset_y + 65 && y < offset_y + 95) {
			this.btn1Pressed = true
			return
		}

		if (x > 320 && x < 320 + 30 && y > offset_y + 65 && y < offset_y + 95) {
			if (!this.btn1Pressed) {
				this.reset()
				return
			}
			this.btn2Pressed = true
			return
		}

		if (x > 540 && x < 540 + 30 && y > offset_y + 65 && y < offset_y + 95) {
			if (!this.btn2Pressed) {
				this.reset()
				return
			}
			this.btn3Pressed = true
			return
		}
	}

	public getCursor(x, y) {
		const offset_y = 500
		return [100, 320, 540].some(offset_x => {
			return x > offset_x
				&& x < offset_x + 30
				&& y > offset_y + 65
				&& y < offset_y + 95
		}) ? 'pointer' : 'default'
	}

	public get result() {
		return this.ready
	}
}
