import { Scene } from 'phaser'
import { emitter } from '@/plugins'

enum Direction {
    LEFT = 'l',
    RIGHT = 'r',
    UP = 'u',
    DOWN = 'd'
}
interface Path {
    postion: {
        x: number
        y: number
    }
    directions: Array<Direction>
}
interface Person {
    wait: boolean
    sprite: null | any
    paths: Array<Path>
}

function getRandom(num = 1) {
    return Math.floor(Math.random() * num)
}

export default class PlayScene extends Scene {
    constructor() {
        super({ key: 'PlayScene' })
    }
    private bg: any
    private route: any
    private walker: any
    private person1: any
    private map: any
    private enterBtn: any
    private anims_direction = {
        Isabella_Rodriguez: 'l',
        Tamara_Taylor: 'l'
    }
    private personInfo = <any>{
        Isabella_Rodriguez: <Person>{
            wait: false,
            sprite: null,
            paths: []
        },
        Arthur_Burton: <Person>{
            wait: false,
            sprite: null,
            paths: []
        },
        Tamara_Taylor: <Person>{
            wait: false,
            sprite: null,
            paths: []
        },
        Abigail_Chen: <Person>{
            wait: false,
            sprite: null,
            paths: []
        },
        Klaus_Mueller: <Person>{
            wait: false,
            sprite: null,
            paths: []
        },
        Wolfgang_Schulz: <Person>{
            wait: false,
            sprite: null,
            paths: []
        },
        Carlos_Gomez: <Person>{
            wait: false,
            sprite: null,
            paths: []
        }
    }

    create() {
        this.add.tileSprite(0, 0, 1024, 1024, 'grass').setOrigin(0, 0)
        this.map = this.make.tilemap({
            key: 'castleMap',
            tileWidth: 16,
            tileHeight: 16
        })
        // console.log(this.map)
        const swamp_ = this.map.addTilesetImage('swamp_', 'swamp_')
        // this.map.createLayer('grass', swamp_, 0, 0)
        const forestVillageStructures_stallsWatchtower = this.map.addTilesetImage(
            'forestVillageStructures_ [stallsWatchtower]',
            'forestVillageStructures_stallsWatchtower'
        )
        const cave_fencesAndWalls = this.map.addTilesetImage('cave_ [fencesAndWalls]', 'cave_fencesAndWalls')
        const taiga_resources = this.map.addTilesetImage('taiga_ [resources]', 'taiga_resources')
        const forestVillageObjects_ = this.map.addTilesetImage('forestVillageObjects_', 'forestVillageObjects_')
        const forestPath_ = this.map.addTilesetImage('forestPath_', 'forestPath_')
        const Basic_Grass_Biom_things_1 = this.map.addTilesetImage(
            'Basic Grass Biom things 1',
            'Basic_Grass_Biom_things_1'
        )

        const Basic_Plants = this.map.addTilesetImage('Basic Plants', 'Basic_Plants')
        this.map.createLayer(
            'wall',
            [
                forestVillageStructures_stallsWatchtower,
                cave_fencesAndWalls,
                taiga_resources,
                forestVillageObjects_,
                forestPath_,
                swamp_
            ],
            0,
            0
        )
        this.map.createLayer(
            'house',
            [forestVillageStructures_stallsWatchtower, forestVillageObjects_, Basic_Grass_Biom_things_1, Basic_Plants],
            0,
            0
        )

        Object.keys(this.personInfo).forEach((key: string, index: number) => {
            this.personInfo[key].paths = [...this.map.objects][index].objects.map((obj: any) => {
                return {
                    postion: {
                        x: obj.x,
                        y: obj.y
                    },
                    directions: obj.properties[0].value.split(',')
                }
            })
        })
        // this.personInfo.Arthur_Burton.paths = crossing.map((obj: any) => {
        //     return {
        //         postion: {
        //             x: obj.x,
        //             y: obj.y
        //         },
        //         directions: obj.properties[0].value.split(',')
        //     }
        // })

        //flag
        // this.anims.create({
        //     key: 'flagPlay',
        //     frames: 'flag',
        //     frameRate: 10,
        //     repeat: -1
        // })
        // const flag = this.add.sprite(1115, 300, 'flag', 'flagPlay').setScale(3)
        // flag.play('flagPlay')

        // this.anims.create({
        //     key: 'treePlay',
        //     frames: 'tree',
        //     frameRate: 5,
        //     repeat: -1
        // })
        // const tree1 = this.add.sprite(1085, 1980, 'tree', 'treePlay').setScale(3)
        // tree1.play('treePlay')

        const anims = this.anims
        Object.keys(this.personInfo).forEach((key: string) => {
            const left_walk_name = key + '-left-walk'
            const right_walk_name = key + '-right-walk'
            const down_walk_name = key + '-down-walk'
            const up_walk_name = key + '-up-walk'
            const info = this.personInfo[key]
            const path = info.paths[getRandom(info.paths.length)]
            const direction = path.directions[getRandom(path.directions.length)]
            info.direction = direction

            anims.create({
                key: left_walk_name,
                frames: anims.generateFrameNames(key, {
                    prefix: 'left-walk.',
                    start: 0,
                    end: 3,
                    zeroPad: 3
                }),
                frameRate: 6,
                repeat: -1
            })

            anims.create({
                key: right_walk_name,
                frames: anims.generateFrameNames(key, {
                    prefix: 'right-walk.',
                    start: 0,
                    end: 3,
                    zeroPad: 3
                }),
                frameRate: 6,
                repeat: -1
            })

            anims.create({
                key: down_walk_name,
                frames: anims.generateFrameNames(key, {
                    prefix: 'down-walk.',
                    start: 0,
                    end: 3,
                    zeroPad: 3
                }),
                frameRate: 6,
                repeat: -1
            })

            anims.create({
                key: up_walk_name,
                frames: anims.generateFrameNames(key, {
                    prefix: 'up-walk.',
                    start: 0,
                    end: 3,
                    zeroPad: 3
                }),
                frameRate: 6,
                repeat: -1
            })
            info['sprite'] = this.add.sprite(path.postion.x, path.postion.y, key)
            // .setScale(0.7)

            switch (direction) {
                case 'l':
                    info['sprite'].play(left_walk_name, true)
                    break
                case 'r':
                    info['sprite'].play(right_walk_name, true)
                    break
                case 'u':
                    info['sprite'].play(up_walk_name, true)
                    break
                case 'd':
                    info['sprite'].play(down_walk_name, true)
                    break
            }
        })

        //房子
        this.anims.create({
            key: 'redHouse_1_0_play',
            frames: 'redHouse_1_0',
            frameRate: 5,
            repeat: -1
        })
        const redHouse_1_0 = this.add.sprite(630, 100, 'redHouse_1_0')
        redHouse_1_0.play('redHouse_1_0_play')

        this.anims.create({
            key: 'redHouse_3_0_play',
            frames: 'redHouse_3_0',
            frameRate: 5,
            repeat: -1
        })
        const redHouse_3_0 = this.add.sprite(350, 400, 'redHouse_3_0')
        redHouse_3_0.play('redHouse_3_0_play')

        this.anims.create({
            key: 'redShop_0_play',
            frames: 'redShop_0',
            frameRate: 5,
            repeat: -1
        })
        const redShop_0 = this.add.sprite(650, 820, 'redShop_0')
        redShop_0.play('redShop_0_play')

        this.anims.create({
            key: 'blueHouse_4_0_play',
            frames: 'blueHouse_4_0',
            frameRate: 5,
            repeat: -1
        })
        const blueHouse_4_0 = this.add.sprite(420, 640, 'blueHouse_4_0')
        blueHouse_4_0.play('blueHouse_4_0_play')

        this.anims.create({
            key: 'blueHouse0_0_play',
            frames: 'blueHouse0_0',
            frameRate: 5,
            repeat: -1
        })
        const blueHouse0_0 = this.add.sprite(700, 600, 'blueHouse0_0')
        blueHouse0_0.play('blueHouse0_0_play')
        const blueHouse0_0_1 = this.add.sprite(350, 100, 'blueHouse0_0')
        blueHouse0_0_1.play('blueHouse0_0_play')
    }

    update() {
        Object.keys(this.personInfo).forEach((key: string) => {
            const info = this.personInfo[key]
            switch (info.direction) {
                case 'l':
                    info.sprite.x -= 1
                    break
                case 'r':
                    info.sprite.x += 1
                    break
                case 'u':
                    info.sprite.y -= 1
                    break
                case 'd':
                    info.sprite.y += 1
                    break
            }
            const walkName = {
                [Direction.LEFT]: key + '-left-walk',
                [Direction.RIGHT]: key + '-right-walk',
                [Direction.UP]: key + '-up-walk',
                [Direction.DOWN]: key + '-down-walk'
            }
            const x = info.sprite.x
            const y = info.sprite.y
            info.paths.forEach((path: Path) => {
                if (x === path.postion.x && y === path.postion.y) {
                    const direction = path.directions[getRandom(path.directions.length)]
                    info.sprite.play(walkName[direction], true)
                    info.direction = direction
                }
            })
        })
    }
}
