import { asyncDelay, exchangeNodePos, getSprNode, onHomeworkFinish, onHomeworkStart, playAudio } from "../script/util_hy05_pintu";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent_hy05_pintu";
import GameJigsaw, { ItemJigsaw, OptionJigsaw } from "./Gamehy05_pintu";
import pg from "./pg_hy05_pintu";

const { ccclass, property } = cc._decorator;

@ccclass
export default class PuzzleJigsaw extends MyCocosSceneComponent {

    addPreloadImage() {
        // TODO 根据自己的配置预加载图片资源
        this._imageResList.push({ url: this.data.pic_url });
        this._imageResList.push({ url: this.data.pic_url_2 });
    }

    addPreloadAudio() {
        // TODO 根据自己的配置预加载音频资源
        this._audioResList.push({ url: this.data.audio_url });
    }

    addPreloadAnima() {

    }

    onLoadEnd() {
        // TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考
        this.initData();
        this.initView();
        this.initEvent();
    }
    @property(cc.Node)
    layout_sort: cc.Node = null;

    @property(cc.Node)
    right_layout: cc.Node = null;

    @property(cc.Node)
    node_card: cc.Node = null;

    @property(cc.Node)
    sort_card: cc.Node = null;

    @property(cc.Node)
    big_item: cc.Node = null;

    @property(cc.Node)
    layer_right: cc.Node = null;

    @property(cc.Node)
    btn_up: cc.Node = null;

    @property(cc.Node)
    btn_down: cc.Node = null;


    initData() {
        GameJigsaw.getIns().init(this.data);
        GameJigsaw.getIns().reset();
        this.cardBgs = [];
    }
    initView() {
 
        this.startGame();
        let itembg = cc.find("itembg", this.node);
        pg.view.setNetImg(itembg, GameJigsaw.getIns().image, { w: 960, h: 608 });
    }
    initEvent() {

        pg.view.touchOn(cc.find("btn_close", this.big_item), this.onCloseBigItem, this);
        pg.view.touchOn(this.btn_up, this.onScUp, this);
        pg.view.touchOn(this.btn_down, this.onScDown, this);

        pg.event.on("gameOver", () => { this.gameOver() })
        cc.find("rightSc", this.node).on("scroll-ended-with-threshold", this.scrollEnd, this);
    }
    protected update(dt: number): void {
        if (!this.node || !this.node.active) return;
        if (!this.btn_down || !this.btn_up) return;
        if (this.btn_down.active || this.btn_up.active) return;
        if (!this.right_layout || this.right_layout.height < 450) return;
        this.updataArrow();
    }
    private updataArrow() {
        let height = this.right_layout.height;
        this.btn_up.active = height > 450;
        this.btn_down.active = height > 450;
    }

   
    private scrollEnd(e) {
        let rightSc = cc.find("rightSc", this.node).getComponent(cc.ScrollView);
        let off = rightSc.getScrollOffset();
        let maxOff = rightSc.getMaxScrollOffset();
        this.btn_up.getComponent(cc.Button).interactable = off.y > 5;
        this.btn_down.getComponent(cc.Button).interactable = off.y < maxOff.y - 5;
    }
    private onScUp() {
        let rightSc = cc.find("rightSc", this.node).getComponent(cc.ScrollView);
        let off = rightSc.getScrollOffset();
        rightSc.scrollToOffset(cc.v2(0, off.y - 258), 0.5);
    }
    private onScDown() {
        let rightSc = cc.find("rightSc", this.node).getComponent(cc.ScrollView);
        let off = rightSc.getScrollOffset();
        rightSc.scrollToOffset(cc.v2(0, off.y + 258), 0.5);
    }
    private onCloseBigItem() {
        this.big_item.active = false;
    }

    //根据两点获取距离
    private getDistance(p1, p2) {
        let temp = p1.sub(p2);
        let dis = Math.abs(temp.mag());
        return dis;
    }
    private getDistances(p1, p2) {
        //转换世界坐标查看距离
        let ps2 = p2.convertToWorldSpaceAR(cc.v2(0, 0));
        let ps1 = p1.convertToWorldSpaceAR(cc.v2(0, 0));
        let temp = ps1.sub(ps2);
        let dis = Math.abs(temp.mag());
        return dis;
    }
    private rectCollect(A, B) {
        let AP = A.convertToWorldSpaceAR(cc.v2(0, 0));
        let BP = B.convertToWorldSpaceAR(cc.v2(0, 0));
        if (Math.abs(AP.x - BP.x) < A.width + B.width
            && Math.abs(AP.y - BP.y) < A.height + B.height) return true;
        return false;
    }

    private currentCards: cc.Node[];
    //开始游戏
    startGame() {
        GameJigsaw.getIns().reset();
        this.nextPage();
    }
    nextPage() {
        this.checked = false;
        this.cards = [];
        this.currentCards = [];
        this.cardBgs = [];
        let data = GameJigsaw.getIns().list;
        //自动创建卡片
        this.right_layout.active = true;
        this.createCrads(data);
    }
    //创建卡片
    private cards: cc.Node[];
    private cardBgs: cc.Node[];
    createCrads(list) {
        this.right_layout.removeAllChildren();
        // this.cleanLayoutSort();
        this.layout_sort.removeAllChildren();

        let count = 0;
        list.forEach(li => {
            let item = cc.instantiate(this.node_card);
            this.right_layout.addChild(item);
            li.count = count;
            this.initTopCard(item, li);
            count++;
        })
        count = 0;
        let pos = GameJigsaw.getIns().pointsArr;
        pos.forEach((li, idx) => {
            let item = cc.instantiate(this.sort_card);
            this.layout_sort.addChild(item);
            // let rightBg0 = cc.find("rightBg1", item);
            // rightBg0.active = true;
            item.x = li.x;
            item.y = li.y;
            item.active = true;
            item.sortId = idx;
            item.isChecked = false;
            this.cardBgs.push(item);
        })
    }
    private initTopCard(item, data) {
        let img = cc.find("img", item);
        pg.view.setNetImg(img, data.image, { w: 118, h: 118 }, false);
        item.active = true;
        item.y = 0;
        item.x = 0;
        img.data = data;
        item.data = data;
        img.scale = 0.9;
        img.on(cc.Node.EventType.TOUCH_START, this.onItemTouchStart, this);
        img.on(cc.Node.EventType.TOUCH_MOVE, this.onItemTouchMove, this);
        img.on(cc.Node.EventType.TOUCH_END, this.onItemTouchEnd, this);
        img.on(cc.Node.EventType.TOUCH_CANCEL, this.onItemTouchCancel, this);
        // item.on(cc.Node.EventType.TOUCH_END, this.onItem, this);
    }
    private onItem(e) {
        let target: cc.Node = e.target;
        let image = cc.find("img", this.big_item);
        pg.view.setNetImg(image, target.data.image, { w: 200, h: 200 }, false);
        image.scale = 1.5;
        this.big_item.active = true;
        this.big_item.zIndex = 60;
    }
    private setTouchPos(e) {
        let location = e.getLocation();
        let size = cc.view.getCanvasSize();
        let scale = (size.width / size.height) / (1920 / 1080);
        if (scale > 1) {
            let width = size.width / size.height * 1080;
            let pos = location.sub(cc.v2(width / 2, 1080 / 2))
            e.target.setPosition(pos)
        } else {
            let height = size.height / size.width * 1920;
            let pos = location.sub(cc.v2(1920 / 2, height / 2))
            e.target.setPosition(pos)
        }
    }
    checkSuccess(target, data) {
        let itemBg = this.cardBgs.find((bg) => {
            // let dis = this.getDistances(target.getPosition(), bg.getPosition());
            let dis = this.getDistances(target, bg);
            // if (dis < 100 && bg.sortId == data.id) {
            if (dis < 100 && cc.find("n/img", bg)) {
                return bg;
            }
            return null;
        })
        return itemBg && itemBg.sortId == data.id
    }
    onItemTouchStart(e) {
        let target: cc.Node = e.target;
        let data = target.data;
        //已经成功的方块要拒绝掉
        if (this.checkSuccess(target, data)) return;
        target.parent = this.node;
        target.scale = 1;
        this.setTouchPos(e);
        target.startPos = target.getPosition();
        // this.playLocalAudio("move");
    }
    onItemTouchMove(e) {
        let target: cc.Node = e.target;
        let data = target.data;
        //已经成功的方块要拒绝掉
        if (this.checkSuccess(target, data)) return;
        this.setTouchPos(e);
    }
    onItemTouchEnd(e) {
        let target: cc.Node = e.target;
        let data = target.data;
        if (this.getDistance(target.startPos, target.getPosition()) < 30) {//&& target.parent.name != "Canvas"
            // this.onItem(e);
            target.parent = this.right_layout.children[data.count];
            target.setPosition(0, 0);
            // this.playLocalAudio("big");
            target.scale = 0.9;
            return;
        }
        //已经成功的方块要拒绝掉
        if (this.checkSuccess(target, data)) return;
        let itemBg = this.cardBgs.find((bg) => {
            // let dis = this.getDistances(target.getPosition(), bg.getPosition());
            let dis = this.getDistances(target, bg);
            // if (dis < 100 && bg.sortId == data.id) {
            if (dis < 100 && !cc.find("img", bg)) {
                return bg;
            }
            return null;
        })
        //检测是否在区域内
        let isIn = this.rectCollect(target, this.layout_sort);
        if (!itemBg && !isIn) {
            target.parent = this.right_layout.children[data.count];
            target.setPosition(0, 0);
            // this.playLocalAudio("error");
            target.scale = 0.9;
            return;
        }
        if (itemBg && itemBg.sortId == data.id) {
            // let rightBg0 = cc.find("rightBg0", itemBg);
            // let rightBg1 = cc.find("rightBg1", itemBg);
            // rightBg0.active = true;
            // rightBg1.active = true;
            itemBg.isChecked = true;
            this.playLocalAudio("right");
            // setTimeout(() => {
            //     rightBg0.active = false;
            //     rightBg1.active = false;
            // }, 1000);
            //执行
            target.parent = itemBg.getChildByName("n");
            //每一个设置都要设置成中心点？
            target.setPosition(0, 0);//-target.parent.height / 2
            target.setAnchorPoint(0.5, 0.5)
            itemBg.getChildByName("particle_star").active = true;
            setTimeout(() => {
                itemBg.getChildByName("particle_star").active = false;
            }, 1000);

            if (this.checkRoundEnd()) {
                GameJigsaw.getIns().addPage();
                pg.event.emit("gameOver");
            }
        } else {
            this.playLocalAudio("error");
        }
    }
    onItemTouchCancel() {

    }
    private cleanLayoutSort() {
        this.cardBgs.forEach((item) => {
            let img = cc.find("img", item);
            if (img) {
                img.parent = null;
                img.destroy();
            }
        })
    }
    private checkRoundEnd() {
        let count = 0;
        this.cardBgs.forEach((item) => {
            if (item.isChecked) count++;
        })
        return count == this.cardBgs.length;
    }
    checked: boolean;
    checkFull() {
        if (!this.currentCards) return;
        if (!this.cards) return;
        if (this.currentCards.length != this.cards.length) return false;
        return this.currentCards.every(card => !!card);
    }

    gameOver() {
        
        this.layer_right.active = true;
        pg.event.emit("layer_right_show_excellent");
        // this.playLocalAudio("over");
        // this.showFinal().then(() => {
        //     let data: any = {};
        //     data.userId = 453;
        //     data.score = GameJigsaw.getIns().questionScore;
        //     data.local = JSON.stringify({ check: true });
        //     onHomeworkFinish(data, () => {
        //         const middleLayer = cc.find('middleLayer');
        //         if (middleLayer) {
        //             const mc = middleLayer.getComponent('middleLayer');
        //             // // 切换下一页
        //             mc.goNextPage();
        //         }
        //     });
        // });
    }
 
    playLocalAudio(audioName) {
        const audio = cc.find(`Canvas/res/audio/${audioName}`).getComponent(cc.AudioSource);
        return new Promise((resolve, reject) => {
            const id = cc.audioEngine.playEffect(audio.clip, false);
            cc.audioEngine.setFinishCallback(id, () => {
                resolve(id);
            });
        })
    }
}


