import { ref } from 'vue';
import createStore from '@zjxpcyc/vue-tiny-store';

const useAudio = () => {
  const audioRef = ref();
  const audioSrc = ref();
  const playing = ref(false);
  
  const setAudio = audio => audioRef.value = audio;
  const isCurrent = src => audioSrc.value === src;

  const play = (src) => {
    if (audioRef.value) {
      if (!isCurrent(src)) {
        if (playing.value) {
          playing.value = false;
          stop();
        }

        audioSrc.value = src;
        audioRef.value.src = src;
      }

      if (playing.value) return;

      audioRef.value.play();
      playing.value = true;
    }
  }

  const stop = () => {
    if (audioRef.value) {
      audioRef.value.pause();
      playing.value = false;
    }
  }

  const toggle = (src) => {
    if (isCurrent(src)) {
      if (playing.value) {
        stop();
      } else {
        play(src);
      }
    } else {
      play(src);
    }
  }

  const stopCheck = src => {
    if (!isCurrent(src) && playing.value) {
      stop();
    }
  }

  const onEnded = () => {
    playing.value = false;
  }

  return {
    setAudio,
    playing,
    audioSrc,
    isCurrent,
    play,
    stop,
    toggle,
    stopCheck,
    onEnded,
  }
};

const useMap = () => {
  const isReady = ref(false);
  
  const updateIsReady = (val) => {
    isReady.value = val;
  }

  return [isReady, updateIsReady];
}

const store = createStore({ audio: useAudio, map: useMap });

export default store;