<script setup lang="ts">
import { useSettingStore } from '@/stores';
import { NIcon, NSwitch } from 'naive-ui';
import { storeToRefs } from 'pinia';
import type { ComponentInstance } from 'vue';

const settingsStore = useSettingStore();
const { darkThemeEnabled } = storeToRefs(settingsStore);

// 使外部能够获取NSwitch的类型提示
defineExpose({} as ComponentInstance<typeof NSwitch>);
</script>

<template>
  <NSwitch v-model:value="darkThemeEnabled">
    <template #unchecked-icon>
      <NIcon>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="bzzmode-light" clip-path="url(#clip0_543_2115)">
            <path id="fill1" d="M19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12Z" fill="transparent" />
            <path
              id="stroke1"
              d="M19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12Z"
              stroke-linecap="square"
              stroke-width="2"
              stroke="currentColor"
            />
            <g id="bzzstroke2">
              <path
                d="M19.7819 19.7762 19.7791 19.779 19.7764 19.7762 19.7791 19.7734 19.7819 19.7762ZM23.0029 11.9961V12H22.999V11.9961H23.0029ZM19.7791 4.2168 19.7819 4.21956 19.7791 4.22232 19.7764 4.21956 19.7791 4.2168ZM11.999.996094H12.0029V1H11.999V.996094ZM4.22525 4.21956 4.22249 4.22232 4.21973 4.21956 4.22249 4.2168 4.22525 4.21956ZM1.00293 11.9961V12H.999023V11.9961H1.00293ZM4.22249 19.7734 4.22525 19.7762 4.22249 19.779 4.21973 19.7762 4.22249 19.7734ZM11.999 22.9961H12.0029V23H11.999V22.9961Z"
                stroke-linecap="square"
                id="stroke2"
                stroke-width="2"
                stroke="currentColor"
              />
            </g>
          </g>
        </svg>
      </NIcon>
    </template>
    <template #checked-icon>
      <NIcon>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="bzxmode-dark">
            <path
              id="fill1"
              d="M20.5387 14.8522C20.0408 14.9492 19.5263 15 19 15C14.5817 15 11 11.4183 11 7C11 5.54296 11.3194 4.17663 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C15.9737 21 19.3459 18.4248 20.5387 14.8522Z"
              fill="transparent"
            />
            <path
              id="stroke1"
              d="M20.5387 14.8522C20.0408 14.9492 19.5263 15 19 15C14.5817 15 11 11.4183 11 7C11 5.54296 11.3194 4.17663 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C15.9737 21 19.3459 18.4248 20.5387 14.8522Z"
              stroke-width="2"
              stroke="currentColor"
            />
            <g id="bzxstroke2">
              <path
                d="M16.625 4 16.6692 4.08081 16.75 4.125 16.6692 4.16919 16.625 4.25 16.5808 4.16919 16.5 4.125 16.5808 4.08081 16.625 4ZM20.5 8.5 20.6768 8.82322 21 9 20.6768 9.17678 20.5 9.5 20.3232 9.17678 20 9 20.3232 8.82322 20.5 8.5Z"
                id="stroke2"
                stroke-width="2"
                stroke="currentColor"
              />
            </g>
          </g>
        </svg>
      </NIcon>
    </template>
  </NSwitch>
</template>

<style scoped lang="scss"></style>
