import { _decorator, Component, Node, EventTouch, tween, Vec3, UIOpacity, Color, Sprite, Label } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ClickEffect')
export class ClickEffect extends Component {

    @property
    public enableOpacityEffect: boolean = true;  // 控制透明度效果的开关

    private isClicked: boolean = false;  // 点击后锁定状态

    start() {
        // 为节点添加触摸事件监听器
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);

        // 初始化节点的透明度组件
        if (!this.node.getComponent(UIOpacity)) {
            this.node.addComponent(UIOpacity);
        }
    }

    onTouchStart(event: EventTouch) {
        if (this.isClicked) return;  // 如果已经点击，不执行

        // 点击时缩小节点
        tween(this.node)
            .to(0.1, { scale: new Vec3(0.9, 0.9, 0.9) })
            .start();

        // 仅在启用透明度效果时才进行透明度变化
        if (this.enableOpacityEffect) {
            // 更强烈的淡入效果，将透明度设置为 150（部分透明）
            tween(this.node.getComponent(UIOpacity))
                .to(0.1, { opacity: 150 })
                .start();
        }
    }

    onTouchEnd(event: EventTouch) {
        if (this.isClicked) return;  // 如果已经点击，不执行

        // 还原节点大小
        tween(this.node)
            .to(0.1, { scale: new Vec3(1, 1, 1) })
            .start();

        // 仅在启用透明度效果时才恢复透明度
        if (this.enableOpacityEffect) {
            // 强烈的淡出效果，透明度还原为 255（完全不透明）
            tween(this.node.getComponent(UIOpacity))
                .to(0.1, { opacity: 255 })
                .start();
        }

        // 获取 Sprite 组件并将节点变为灰色
        const sprite = this.node.getComponent(Sprite);
        if (sprite) {
            sprite.color = new Color(128, 128, 128);  // 设置节点为灰色
        }

        // 修改节点的 Label 文字为 "已领取"
        const labelNode = this.node.getChildByName("Label");
        if (labelNode) {
            const label = labelNode.getComponent(Label);
            if (label) {
                label.string = "已领取";
            }
        }

        // 设置为已点击状态，防止重复点击
        this.isClicked = true;

        console.log('节点被点击了，已领取');
    }

    onTouchCancel(event: EventTouch) {
        if (this.isClicked) return;  // 如果已经点击，不执行

        // 当触摸被取消时，恢复大小
        tween(this.node)
            .to(0.1, { scale: new Vec3(1, 1, 1) })
            .start();

        // 仅在启用透明度效果时才恢复透明度
        if (this.enableOpacityEffect) {
            tween(this.node.getComponent(UIOpacity))
                .to(0.1, { opacity: 255 })
                .start();
        }
    }

    onDestroy() {
        // 移除事件监听，防止内存泄漏
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    }
}