// Learn cc.Class:
//  - https://docs.cocos.com/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const SCRATCH_CARD_MODE = cc.Enum({
    RECT: 0,
    DIAMOND: 1,
    CIRCLE: 2
});
cc.Class({
    extends: cc.Component,

    properties: {
        maskOverlay: {
            default: null,
            type: cc.Node
        },
        touchScratchRadius: {
            default: 30,
            type: cc.Float
        },
        displayLabel: {
            default: null,
            type: cc.Label
        },
        checkMode: {
            default: SCRATCH_CARD_MODE.RECT,
            type: SCRATCH_CARD_MODE
        }
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.downFlag = false;

        this.mask = this.node.getChildByName('Mask').getComponent(cc.Mask);
        this.node.on(cc.Node.EventType.MOUSE_DOWN, this.mouseDown, this);
        this.node.on(cc.Node.EventType.MOUSE_MOVE, this.mouseMove, this);
        this.node.on(cc.Node.EventType.MOUSE_UP, this.mouseUp, this);
        this.node.on(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this);
        this.initRectMaskPoints();
        this.touchable = true;
        this.node.on(cc.Node.EventType.TOUCH_START,function(e){
            e.stopPropagation();
        });
    },

    fadeOutMask() {
       cc.tween(this.maskOverlay).to(1, {
            opacity: 0
       }).call(() => {
           this.maskOverlay.active = false;
       }).start();
    },


    setTouchable(able) {
        // console.log(55555, this._id, able);
        this.touchable = able;
    },
    mouseDown(e){
        if (!this.touchable) {
            return
        }
        this.downFlag = true;
        this.scratch(e);

        if (this.node.hasEventListener(cc.Node.EventType.TOUCH_START)) {
            this.node.off(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        }
    },
    mouseMove(e){
        if (!this.touchable) {
            return
        }
        if (!this.downFlag) {
            return;
        }
        this.scratch(e);
        if (this.node.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
            this.node.off(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this);
        }
    },
    mouseUp(e) {
        this.downFlag = false;
        if (this.node.hasEventListener(cc.Node.EventType.TOUCH_END)) {
            this.node.off(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        }
        if (this.node.hasEventListener(cc.Node.EventType.TOUCH_CANCEL)) {
            this.node.off(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel, this);
        }
    },
    touchStart(e){
        if (!this.touchable) {
            return
        }
        this.downFlag = true;
        this.scratch(e);
        if (this.node.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) {
            this.node.off(cc.Node.EventType.MOUSE_DOWN, this.mouseDown, this);
        }
    },
    touchMove(e){
        if (!this.touchable) {
            return
        }
        this.scratch(e);
        if (this.node.hasEventListener(cc.Node.EventType.MOUSE_MOVE)) {
            this.node.off(cc.Node.EventType.MOUSE_MOVE, this.mouseMove, this);
        }
    },
    touchEnd(e){
        this.downFlag = false;
        // this.scratch(e);
        if (this.node.hasEventListener(cc.Node.EventType.MOUSE_UP)) {
            this.node.off(cc.Node.EventType.MOUSE_UP, this.mouseUp, this);
        }
    },
    touchCancel(e){
        this.downFlag = false;
        // this.scratch(e);
        if (this.node.hasEventListener(cc.Node.EventType.MOUSE_UP)) {
            this.node.off(cc.Node.EventType.MOUSE_UP, this.mouseUp, this);
        }
    },
    initRectMaskPoints() {
        const rows = Math.floor(this.node.height / (this.touchScratchRadius * 2));
        const cols = Math.floor(this.node.width / (this.touchScratchRadius * 2));
        this.hidePoints = {};
        for (let i = 0; i < rows ; i++) {
            for (let j = 0; j < cols ; j++) {
                // console.log(j, i);
                this.hidePoints[`${j},${i}`] = true;
            }
        }
        this.hidePointsNum = Object.keys(this.hidePoints).length
    },
    getTouchPos(e) {
        return this.node.convertToNodeSpaceAR(e.getLocation());
    },


    scratch(e) {
        const pos = this.getTouchPos(e);
        this.addTouchTrack(pos);
        this.calcScratchArea(pos);
    },
    addTouchTrack(pos) {
        const graph = this.mask._graphics;
        graph.circle(pos.x, pos.y, this.touchScratchRadius);
        graph.fill()
    },
    calcScratchArea(pos) {
        if (this.isClean) {
            return
        }
        const x = Math.floor((pos.x + this.node.width / 2) / (this.touchScratchRadius * 2));
        const y = Math.floor(Math.abs(pos.y - this.node.height / 2) / (this.touchScratchRadius * 2));
        if (this.hidePoints[`${x},${y}`]) {
            delete this.hidePoints[`${x},${y}`];
        }
        // console.log(x, y ,Object.keys(this.hidePoints).length, this.hidePointsNum);
        if (Object.keys(this.hidePoints).length / this.hidePointsNum < .35) {
            this.isClean = true;
            this.node.emit('SCRATCH_CARDFS_CLEANED')
            // console.log('ok ok ok ok ');
        }
    },

    start () {

    },

    // update (dt) {},
});
