<template>
    <div>
        <canvas :id="id" width="320" height="620" tabindex="0"/>
    </div>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from "vue-property-decorator";
    import { v1 as uuid } from "uuid";
    import {SCanvasView, SColor, SPainter} from "@persagy-web/draw/lib";

    class TestView extends SCanvasView {
        map: number[][] = [];
        fkType: number = Number((Math.random() * 6).toFixed());  // 0-6
        dir: number = Number((Math.random() * 2).toFixed());  // 0-3
        fk: number[][][]=[
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 1, 1],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [1, 1, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [1, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 1],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 0],
                [1, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 1],
                [0, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 0],
                [0, 1, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 1, 0],
                [0, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 0],
            ]
        ];
        x = 5;
        y = 0;
        t = Date.now();

        constructor(id: string) {
            super(id);
            this.initMap();
        }

        onKeyDown(event: KeyboardEvent): void {
            console.log(event.code);
            if (event.code == "KeyW") {
                if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
                    this.dir = (this.dir + 1) % 4;
                }
            } else if (event.code == "KeyA") {
                if (!this.isPz(this.x - 1, this.y, this.dir)) {
                    this.x--;
                }
            } else if (event.code == "KeyD") {
                if (!this.isPz(this.x + 1, this.y, this.dir)) {
                    this.x++;
                }
            }
            else if (event.code == "KeyS") {
                if (!this.isPz(this.x, this.y + 1, this.dir)) {
                    this.y++;
                } else {
                    this.fullMap();
                    this.xc();
                }
            }
            this.update();
        }

        onDraw(painter: SPainter): void {
            painter.clearRect(0,0,this.width, this.height);

            painter.pen.color = SColor.Transparent;
            painter.brush.color = SColor.Red;

            this.drawMap(painter);
            this.drawFk(painter);

            if (Date.now() - this.t > 500) {
                if (!this.isPz(this.x, this.y + 1, this.dir)) {
                    this.y++;
                } else {
                    this.fullMap();
                    this.xc();
                }
                this.t = Date.now();
            }
            this.update();
        }

        private initMap(): void {
            this.map = [];
            for (let row = 0; row < 22; row++) {
                const m1:number[] = []
                for (let col = 0; col < 14; col++) {
                    if (row > 19 || col < 2 || col > 11) {
                        m1.push(2);
                    } else {
                        m1.push(0);
                    }
                }
                this.map.push(m1);
            }
        }

        private drawMap(painter: SPainter): void {
            for (let row = 0; row < 22; row++) {
                for (let col = 0; col < 14; col++) {
                    if (this.map[row][col] == 1) {
                        painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                    }
                    if (this.map[row][col] == 2) {
                        painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                    }
                }
            }
        }

        private drawFk(painter: SPainter): void {
            for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
                        painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
                    }
                }
            }
        }

        private isPz(x: number, y: number, dir: number): boolean {
            for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
                        return true;
                    }
                }
            }
            return false;
        }

        private fullMap() {
            for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
                        this.map[this.y + row][this.x + col] = 1;
                    }
                }
            }

            this.x = 5;
            this.y = 0;
            this.fkType = Number((Math.random() * 6).toFixed());
            this.dir = Number((Math.random() * 2).toFixed());
        }

        private xc(): void{
            for (let row = 0; row < 20; row++) {
                let flag = true;
                for (let col = 0; col < 14; col++) {
                    if (this.map[row][col] == 0) {
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    this.map.splice(row,1);
                    this.map.unshift([2,2,0,0,0,0,0,0,0,0,0,0,2,2]);
                    // row--;
                }
            }
        }
    }

    @Component
    export default class ElsfkCanvas extends Vue {
        id: string = uuid();
        mounted(): void {
            new TestView(this.id);
        }
    }
</script>
