import { _decorator, CCString, Color, Label, Node, Sprite, SpriteFrame, Tween, tween, Vec3 } from 'cc';
import Singleton from '../Singleton';
const { ccclass, property } = _decorator;

@ccclass('Sticker')
class Sticker {
    @property(CCString)
    public Name: string = '';
    @property(SpriteFrame)
    public SpriteFrame: SpriteFrame;
}

@ccclass('StickerManager')
export class StickerManager extends Singleton<StickerManager>() {
    @property({ type: Node, visible: true })
    private _popup: Node;
    @property({ type: Label, visible: true })
    private _label: Label;
    @property({ type: Sticker, visible: true })
    private _stickers: Sticker[] = [];

    protected start(): void {
        this._popup.setScale(Vec3.ZERO);
        this._label.string = '';
    }

    public Show(stickerName: string, position: Vec3 = Vec3.ZERO) {
        let sticker = this._stickers.find((s) => s.Name == stickerName);
        this._popup.setPosition(position);
        this._popup.getComponent(Sprite).spriteFrame = sticker.SpriteFrame;
        tween(this._popup)
            .set({ scale: Vec3.ZERO })
            .to(0.3, { scale: Vec3.ONE }, { easing: 'backOut' })
            .delay(0.5)
            .to(0.2, { scale: Vec3.ZERO }, { easing: 'backIn' })
            .start();
    }

    public showLabel(string: string, opts?: { color?: Color; outLineColor?: Color; position?: Vec3 }) {
        this._label.string = string;
        this._label.color = opts?.color || new Color('#FFFF00');
        this._label.node.setPosition(opts?.position || Vec3.ZERO);
        this._label.outlineColor = opts?.outLineColor || new Color('#FF6600');

        Tween.stopAllByTarget(this._label.node);
        tween(this._label.node)
            .set({ scale: Vec3.ZERO })
            .to(0.2, { scale: Vec3.ONE }, { easing: 'backOut' })
            .delay(1)
            .to(
                0.1,
                { scale: Vec3.ZERO },
                {
                    onComplete: () => {
                        this._label.string = '';
                    },
                    easing: 'backIn',
                },
            )
            .start();
    }
}