<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>