import { _decorator, Component, Node, Toggle } from 'cc';
import { AudioManager } from './AudioManager';
const { ccclass, property } = _decorator;

@ccclass('AudioSettingsUI')
export class AudioSettingsUI extends Component {
    @property(Node)
    panel: Node = null!; // 设置面板节点

    @property(Toggle)
    bgmToggle: Toggle = null!;

    @property(Toggle)
    sfxToggle: Toggle = null!;

    onLoad() {
        const am = AudioManager.instance;

        // 初始化 Toggle 状态
        this.bgmToggle.isChecked = am.bgmEnabled;
        this.sfxToggle.isChecked = am.sfxEnabled;

        // Toggle 监听
        this.bgmToggle.node.on('toggle', this.onBgmToggleChanged, this);
        this.sfxToggle.node.on('toggle', this.onSfxToggleChanged, this);

        // 面板默认隐藏
        this.panel.active = false;
    }

    /** 打开设置面板 */
    openPanel() {
        this.panel.active = true;
    }

    /** 关闭设置面板 */
    closePanel() {
        this.panel.active = false;
    }

    private onBgmToggleChanged(toggle: Toggle) {
        AudioManager.instance.setBGMEnabled(toggle.isChecked);
    }

    private onSfxToggleChanged(toggle: Toggle) {
        AudioManager.instance.setSFXEnabled(toggle.isChecked);
    }
}