<script setup>
import { ref, watch, toRaw, h } from "vue";
import { useStore } from "vuex";
import { NButton, NIcon, NSpace, NDropdown } from "naive-ui";
import PlaylistMusic from "@/assets/svgs/PlaylistMusic.svg";
import VolumeOffOutline from "@/assets/svgs/VolumeOffOutline.svg";
import VolumeMediumOutline from "@/assets/svgs/VolumeMediumOutline.svg";
import RepeatOutline from "@/assets/svgs/RepeatOutline.svg";
import RepeatOne from "@/assets/svgs/RepeatOne.svg";
import Playlist from "@/assets/svgs/Playlist.svg";
import Random from "@/assets/svgs/Random.svg";
import pubsub from "pubsub-js";
import Vol from "@/views/common/Vol.vue";

const store = useStore();

//播放模式：0-3，顺序，循环，单曲，随机。
const playMode = ref(0);
const vol = ref(store.state.settings.volume);
const muted = ref(store.state.settings.muted);

const chPlayMode = (mode) => {
  store.commit("saveSettings", {
    playMode: mode,
  });
};

watch(
  () => store.state.settings.playMode,
  (val, oldVal) => {
    playMode.value = toRaw(store.state.settings.playMode);
  },
  {
    immediate: true,
    deep: true,
  }
);

const options = [
  {
    key: "k",
    type: "render",
    render: () => h(Vol, {}),
  },
];

const setVol = (step) => {
  vol.value += step;
  if (vol.value > 100) vol.value = 100;
  if (vol.value < 0) vol.value = 0;
  muted.value = vol.value <= 0
};

watch(
  () => [vol.value, muted.value],
  ([v, m], [oldV, oldM]) => {
    if(v>=0 && v<=100){
      store.commit('saveSettings',{
        volume: v,
        muted: m,
      })
    }
  }
);

const token = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.setVolume":
      setVol(data.step);
      break;
    // case "zp.setMuted":
    //   muted.value = !muted.value
    //   break;
  }
});
</script>

<template>
  <!-- <div id="songsCtrl"> -->
  <n-space
    id="songStatus"
    justify="end"
    align="center"
    :size="[6]"
    style="padding-top: 2px; padding-right: 8px"
  >
    <n-button circle v-if="playMode == 1" @click="chPlayMode(2)">
      <template #icon>
        <n-icon>
          <RepeatOutline />
        </n-icon>
      </template>
    </n-button>
    <n-button circle v-if="playMode == 2" @click="chPlayMode(3)">
      <template #icon>
        <n-icon>
          <RepeatOne />
        </n-icon>
      </template>
    </n-button>
    <n-button circle v-if="playMode == 0" @click="chPlayMode(1)">
      <template #icon>
        <n-icon>
          <Playlist />
        </n-icon>
      </template>
    </n-button>
    <n-button circle v-if="playMode == 3" @click="chPlayMode(0)">
      <template #icon>
        <n-icon>
          <Random />
        </n-icon>
      </template>
    </n-button>
    <n-button circle @click="pubsub.publish('zp.togglePlaying')">
      <template #icon>
        <n-icon>
          <PlaylistMusic />
        </n-icon>
      </template>
    </n-button>
    <NDropdown :options="options" trigger="hover" :show-arrow="true">
      <n-button
        circle
        v-if="store.state.settings.muted"
        @click="pubsub.publish('zp.setMuted')"
      >
        <template #icon>
          <n-icon>
            <VolumeOffOutline />
          </n-icon>
        </template>
      </n-button>
      <n-button circle v-else @click="pubsub.publish('zp.setMuted')">
        <template #icon>
          <n-icon>
            <VolumeMediumOutline />
          </n-icon>
        </template>
      </n-button>
    </NDropdown>
  </n-space>

  <!-- </div> -->
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
#songStatus {
  flex: 2;
}
</style>
