import { _decorator, Component, Node, Sprite, CCString, resources, ImageAsset, SpriteFrame } from 'cc';

const { ccclass, property, disallowMultiple, requireComponent } = _decorator;

import * as gif from "./js/index.js";

const gifParse = gif["default"];

@ccclass('GifRender')

@disallowMultiple

@requireComponent(Sprite)

export class GifRender extends Component {

    @property(CCString)

    url: string;

    private _sprite: Sprite;

    // 画布，可以考虑设置为全局唯一

    private _mainCanvas = null;

    private _tempCanvas = null;

    // 绘制方法对象

    private _mainContext = null;

    private _tempContext = null;

    private _frames = [];

    private _frameIdx = 0;

    private _frameWidth = 0;

    private _frameHeight = 0;

    private _needsDisposal = false;

    private _frameData: ImageData = null;

    onLoad() {

        this._sprite = this.node.getComponent(Sprite);

        this._mainCanvas = this.createCanvas();

        this._tempCanvas = this.createCanvas();

        this._mainContext = this._mainCanvas.getContext('2d');

        this._tempContext = this._tempCanvas.getContext('2d');

    }

    onEnable() {

        this.showGif();

    }

    onDisable() {

        // 清理计时器

        this.unscheduleAllCallbacks();

    }

    private createCanvas() {

        return document.createElement("canvas");

    }

    private async showGif() {

        this.unscheduleAllCallbacks();

        // 准备 gif 渲染数据，这里可以设置缓存避免重复解析加载

        var buffer = await this.getGifData();

        // 解析 gif

        var parse = gifParse.parseGIF(buffer);

        // 解压缩，获取图片列表

        try {

            this._frames = gifParse.decompressFrames(parse, true);

        } catch (e) {

            console.error(e);

            return

        }

        // 开始绘制

        this._needsDisposal = true;

        this._frameIdx = 0;

        this._frameWidth = 9999;

        this._frameHeight = 9999;

        this._frameData = null;

        this._mainCanvas.width = this._frames[0].dims.width;

        this._mainCanvas.height = this._frames[0].dims.height;

        console.log(this._mainCanvas.width,this._mainCanvas.height)

        this.drawGif();

    }

    private drawGif() {

        let frame = this._frames[this._frameIdx];

        let now = Date.now();

        // 清理画布

        if (this._needsDisposal) {

            this._mainContext.clearRect(0, 0, this._frameWidth, this._frameHeight);

            this._needsDisposal = false;

        }

        // 当前帧大小尺寸是否发生变化，按理不会

        let dims = frame.dims;

        if (!this._frameData || dims.width !== this._frameData.width || dims.height !== this._frameData.height) {

            this._tempCanvas.width = dims.width;

            this._tempCanvas.height = dims.height;

            this._frameData = this._mainContext.createImageData(dims.width, dims.height);

        }

        this._frameData.data.set(frame.patch);

        this._tempContext.putImageData(this._frameData, 0, 0);

        this._mainContext.drawImage(this._tempCanvas, dims.left, dims.top);

        this._frameIdx++;

        if (this._frameIdx >= this._frames.length) {

            this._frameIdx = 0;

        }

        if (frame.disposalType === 2) {

            this._needsDisposal = true;

        }

        this._sprite.spriteFrame = SpriteFrame.createWithImage(new ImageAsset(this._mainCanvas));

        // 循环绘制

        let diff = Date.now() - now;

        let time = Math.max(0, Math.floor(frame.delay - diff)) / 1000;

        this.scheduleOnce(this.drawGif.bind(this), time);

    }

    private getGifData() {

        return new Promise((res, rej) => {

            // 资源地址不能包含后缀，需要删除文件后缀

            resources.load(this.url.replace(/\.gif$/i, ""), (error, asset) => {

                if (error) {

                    console.error(error);

                    rej(error)

                }

                this.loadImgArrayBuffer(asset.nativeUrl).then(res);

            })

        })

    }

    private loadImgArrayBuffer(url: string): Promise<ArrayBuffer | null> {

        return new Promise(function (resolve) {

            const xhr = new XMLHttpRequest();

            xhr.open("GET", url, true);

            xhr.responseType = 'arraybuffer';

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    resolve(xhr.response);

                }

            };

            xhr.onerror = function (err) {

                console.error("xhr error", err);

                resolve(null)

            };

            xhr.send(null);

            setTimeout(function () {

                resolve(null)

            }, 10 * 10000);

        })

    }

}

var canvas = document.createElement("canvas");

    var ctx = canvas.getContext('2d');

    //frame 当前 gif 帧数据

    canvas.width = frame.dims.width;

    canvas.height = frame.dims.height;

    // 转化为 ts 的图片数据

    var frameData: ImageData = ctx.createImageData(canvas.width, canvas.height);

    // 设置颜色

    frameData.data.set(frame.patch);

    // 上下文设置图片数据

    ctx.putImageData(frameData, 0, 0);

    //canvas 绘制

    ctx.drawImage(canvas, frame.dims.left, frame.dims.top);

    // 等到最终的 spriteframe

    var sp = SpriteFrame.createWithImage(new ImageAsset(canvas));