<template>
  <a-tooltip :content="theme === 'light' ? '切换为暗黑模式' : '切换为亮色模式'">
    <a-button
      :shape="'circle'"
      class="nav-btn"
      type="outline"
      @click="() => onChange()"
    >
      <template #icon>
        <icon-moon-fill v-if="theme === 'dark'" />
        <icon-sun-fill v-else />
      </template>
    </a-button>
  </a-tooltip>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useAppStore } from '@/store';
import { useDark, useToggle } from '@vueuse/core';

import { IconMoonFill, IconSunFill } from '@arco-design/web-vue/es/icon';

export default defineComponent({
  name: 'ToggleThemeButton',
  components: {
    IconSunFill,
    IconMoonFill,
  },
  setup() {
    const appStore = useAppStore();

    const theme = computed(() => {
      return appStore.theme;
    });

    const isDark = useDark({
      selector: 'body',
      attribute: 'arco-theme',
      valueDark: 'dark',
      valueLight: 'light',
      storageKey: 'arco-theme',
      onChanged(dark: boolean) {
        appStore.toggleTheme(dark);
      },
    });
    const onChange = useToggle(isDark);

    return {
      theme,
      onChange,
    };
  },
});
</script>

<style lang="less" scoped>
.nav-btn {
  border-color: rgb(var(--gray-2));
  color: rgb(var(--gray-8));
  font-size: 16px;
}

.trigger-btn,
.ref-btn {
  position: absolute;
  bottom: 14px;
}

.trigger-btn {
  margin-left: 14px;
}
</style>