<template>
  <NButton :bordered='false' v-ripple style='font-size: 24px;' @click='showConsole = true'>
    <NIcon>
      <geer />
    </NIcon>
  </NButton>
  <NModal to='#house' :block-scroll='false' :style='style' display-directive='show' v-model:show='showConsole'>
    <NCard title='控制台' :segmented="{
      content: 'soft'
    }" :bordered='false'>
      <NTabs placement='left' type='card'>
        <NTabPane name='主题'>
          <NFlex>
            <NText>暗黑模式</NText>
            <NSwitch :default-value='isDark' @update:value='toggleTheme' :round='false' />
          </NFlex>
        </NTabPane>
        <NTabPane name='背景'>
          <NP>
            <NTag :bordered='false'>
              <NText>{{ bgFps }}</NText>
              <template #avatar>
                <NText>FPS</NText>
              </template>
            </NTag>
          </NP>
          <NText>粒子数量</NText>
          <NSlider :max='200' v-model:value='bgParticlesNumber' @update:value='updateBgParticlesNumber' />
          <NText>粒子大小</NText>
          <NSlider :min='1' :max='10' v-model:value='bgInitialSize' @update:value='updateBgInitialSize' />
          <NText>运动速度</NText>
          <NSlider :max='100' v-model:value='bgMoveLimit' @update:value='updateBgMoveLimit' />
          <NText>无规则运动数</NText>
          <NSlider :max='500' v-model:value='bgDuration' range @update:value='updateBgDuration' />
          <NText>鼠标交互距离</NText>
          <NSlider :max='500' v-model:value='bgMouseInteractionDistance' @update:value='updateBgMouseInteractionDistance' />
          <NText>渲染帧率</NText>
          <NSlider :max='120' :min='1' v-model:value='bgRenderFrameRate' @update:value='updateBgRenderFrameRate' />
          <NFlex>
            <NFlex>
              <NText>粒子间连线</NText>
              <NSwitch :default-value='bgDrawConnections' @update:value='toggleBgDrawConnections' :round='false' />
            </NFlex>
            <NFlex>
              <NText>鼠标吸引力</NText>
              <NSwitch :default-value='bgMouseGravity' @update:value='toggleBgMouseGravity' :round='false' />
            </NFlex>
            <NFlex>
              <NText>鼠标与粒子连线</NText>
              <NSwitch :default-value='bgDrawMouseConnections' @update:value='toggleBgDrawMouseConnections' :round='false' />
            </NFlex>
          </NFlex>
        </NTabPane>
        <NTabPane name='高级'>
          <NButton v-ripple @click='resetOptions'>重置所有选项</NButton>
        </NTabPane>
        <NTabPane name='关于'>
          <NP>LazyTong's Console 1.0.0</NP>
          <NP>运行于 {{ title }} {{ version }}</NP>
        </NTabPane>
      </NTabs>
    </NCard>
  </NModal>
</template>
<script setup lang='jsx'>
import {
  title,
  version
} from '~/house';
import {
  geer,
  isDark,
  toggleTheme,
  bgParticlesNumber,
  bgInitialSize,
  bgMoveLimit,
  bgDuration,
  bgDrawConnections,
  bgMouseInteractionDistance,
  bgMouseGravity,
  bgDrawMouseConnections,
  bgRenderFrameRate,
  notification
} from '~/utils';
import {
  NButton,
  NText
} from 'naive-ui';
const toggleBgDrawConnections = () => {
    switch (bgDrawConnections.value) {
      case true:
        bgDrawConnections.value = false;
        showRefreshNotification();
        break;
      case false:
        bgDrawConnections.value = true;
        showRefreshNotification();
        break;
    }
  },
  toggleBgMouseGravity = () => {
    switch (bgMouseGravity.value) {
      case true:
        bgMouseGravity.value = false;
        showRefreshNotification();
        break;
      case false:
        bgMouseGravity.value = true;
        showRefreshNotification();
        break;
    }
  },
  toggleBgDrawMouseConnections = () => {
    switch (bgDrawMouseConnections.value) {
      case true:
        bgDrawMouseConnections.value = false;
        showRefreshNotification();
        break;
      case false:
        bgDrawMouseConnections.value = true;
        showRefreshNotification();
        break;
    }
  },
  refreshPage = () => {
    useRouter().go(0);
  },
  showRefreshNotification = () => {
    notification.info({
      title: '该选项修改后需要刷新页面才能生效',
      content: () => (
        <NButton onClick={refreshPage}>
          <NText>立即刷新</NText>
        </NButton>
      ),
      duration: 2500,
      closable: false,
      keepAliveOnHover: true
    })
  },
  updateBgParticlesNumber = (value) => {
    bgParticlesNumber.value = value;
    showRefreshNotification();
  },
  updateBgInitialSize = (value) => {
    bgInitialSize.value = value;
    showRefreshNotification();
  },
  updateBgMoveLimit = (value) => {
    bgMoveLimit.value = value;
    showRefreshNotification();
  },
  updateBgDuration = (value) => {
    bgDuration.value = value.sort((a, b) => a - b);
    showRefreshNotification();
  },
  updateBgMouseInteractionDistance = (value) => {
    bgMouseInteractionDistance.value = value;
    showRefreshNotification();
  },
  updateBgRenderFrameRate = (value) => {
    bgRenderFrameRate.value = value;
  },
  resetOptions = () => {
    isDark.value = useOsTheme().value === 'dark' ? true : false;
    bgParticlesNumber.value = 80;
    bgInitialSize.value = 3;
    bgMoveLimit.value = 50;
    bgDuration.value = [50, 300];
    bgDrawConnections.value = true;
    bgMouseInteractionDistance.value = 150;
    bgMouseGravity.value = true;
    bgDrawMouseConnections.value = true;
    bgRenderFrameRate.value = 60;
    notification.success({
      title: '已重置，部分选项需要刷新页面才能生效',
      content: () => (
        <NButton onClick={refreshPage}>
          <NText>立即刷新</NText>
        </NButton>
      ),
      duration: 2500,
      closable: false,
      keepAliveOnHover: true
    });
  },
  style = {
    width: '600px'
  },
  showConsole = ref(false),
  bgFps = useState('bgFps');
</script>