import { useEffect } from "react";
import useAudios from "../../components/useAudios";
import getPathPrefix from "../../utils/getPathPrefix";
const EVENTS = {
    EVENT_PLAY_MUSIC: "play_music",
    EVENT_STOP_MUSIC: "stop_music",
    EVENT_SET_MUTE: "set_mute",
    EVENT_PLAY_SFX: "play_sfx",
}

export const DISPATCH_PLAY_MUSIC = (musicPath) => {
    document.dispatchEvent(new CustomEvent(EVENTS.EVENT_PLAY_MUSIC, { detail: musicPath }));
};

export const DISPATCH_STOP_MUSIC = () => {
    document.dispatchEvent(new CustomEvent(EVENTS.EVENT_STOP_MUSIC));
};

export const DISPATCH_SET_MUTE = (mute) => {
    document.dispatchEvent(new CustomEvent(EVENTS.EVENT_SET_MUTE, { detail: mute }));
};

export const DISPATCH_PLAY_SFX = (sfxPath) => {
    document.dispatchEvent(new CustomEvent(EVENTS.EVENT_PLAY_SFX, { detail: sfxPath }));
};

function AudioController() {
    const allMusics = useAudios([
        getPathPrefix("/audios/01.mp3"),
        getPathPrefix("/audios/02.mp3"),
        getPathPrefix("/audios/03.mp3"),
        getPathPrefix("/audios/counting.mp3"),
        getPathPrefix("/audios/timeout.mp3"),
    ]);


    useEffect(() => {
        if (!allMusics.length) return;

        const handlePlayMusic = (event) => {
            const musicPath = event.detail;

            allMusics.forEach((music) => {
                music?.stop({
                    ramp: true,
                });
            });

            setTimeout(() => {
                const track = allMusics.find(
                    (music) => music?.src === getPathPrefix(musicPath)
                );
                if (!track) return;

                track.play({
                    loop: true,
                    volume: 1,
                    // 控制是否要音量漸強
                    ramp: true,
                });
            }, 1000)

        };

        document.addEventListener(
            EVENTS.EVENT_PLAY_MUSIC,
            handlePlayMusic
        );

        const handlePlaySfx = (event) => {

            const sfxPath = event.detail;
            const sfx = allMusics.find(
                (music) => music.src === sfxPath
            );
            sfx.play({
                loop: false,
                volume: 0.5,
            });
        };

        const handleStopMusic = () => {

            allMusics.forEach((music) => {
                music?.stop({
                    ramp: true,
                });
            });
        };

        document.addEventListener(
            EVENTS.EVENT_PLAY_SFX,
            handlePlaySfx
        );

        document.addEventListener(
            EVENTS.EVENT_STOP_MUSIC,
            handleStopMusic
        );

        return () => {
            document.removeEventListener(
                EVENTS.EVENT_PLAY_MUSIC,
                handlePlayMusic
            );

            document.removeEventListener(
                EVENTS.EVENT_PLAY_SFX,
                handlePlaySfx
            );

            document.removeEventListener(
                EVENTS.EVENT_STOP_MUSIC,
                handleStopMusic
            );
        };
    }, [allMusics]);

    return null;
}

export default AudioController;
