<template>
  <div class="go-chart-configurations-animations" v-if="targetData">
    <SettingItemBox :name="t('external.animation.animationConfigText')">
      <SettingItem :name="t('external.animation.isEnabledAnimText')">
        <n-select
          clearable
          v-model:value="targetData.styles.animationsStyleConfig.animationPlayState"
          size="small"
          :options="animationPlayStateOption"
        ></n-select>
      </SettingItem>
      <SettingItem :name="t('external.animation.animationTimeText')">
        <n-select
          clearable
          v-model:value="targetData.styles.animationsStyleConfig.animationTimingFunction"
          size="small"
          :options="animationTimingFunctionOption"
        ></n-select>
      </SettingItem>
      <SettingItem :name="t('external.animation.animationDurText')">
        <n-input-number
          :min="0"
          v-model:value="targetData.styles.animationsStyleConfig.animationDuration"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('external.animation.animationDelayText')">
        <n-input-number
          :min="0"
          v-model:value="targetData.styles.animationsStyleConfig.animationDelay"
          size="small"
          :options="animationTimingFunctionOption"
        ></n-input-number>
      </SettingItem>
      <SettingItem :name="t('external.animation.animationNumberText')">
        <n-select
          clearable
          v-model:value="targetData.styles.animationsStyleConfig.animationIterationCount"
          size="small"
          :options="animationIterationCountOption"
        ></n-select>
      </SettingItem>
    </SettingItemBox>
    <n-button class="clear-btn go-my-2" :disabled="!targetData.styles.animations.length" @click="clearAnimation">
      {{ t('external.animation.clearAnimationText') }}
    </n-button>
    <collapse-item v-for="(item, index) in animations" :key="index" :name="item.label" :expanded="true">
      <n-grid :x-gap="6" :y-gap="10" :cols="3">
        <n-grid-item
          class="animation-item go-transition-quick"
          :class="[
            activeIndex(childrenItem.value) && 'active',
            hoverPreviewAnimate === childrenItem.value && `animate__animated  animate__${childrenItem.value}`
          ]"
          v-for="(childrenItem, index) in item.children"
          :key="index"
          @mouseover="hoverPreviewAnimate = childrenItem.value"
          @click="addAnimation(childrenItem)"
        >
          <n-ellipsis style="max-width: 100px">
            {{ childrenItem.label }}
          </n-ellipsis>
        </n-grid-item>
      </n-grid>
    </collapse-item>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, Ref } from 'vue'
import { animations } from '@/settings/animations/index'
import { CollapseItem } from '@/components/Pages/ChartItemSetting'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useTargetData } from '../hooks/useTargetData.hook'
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import type { SelectOption } from 'naive-ui'
import {
  AnimationPlayStateEnum,
  AnimationTimingFunctionEnum,
  AnimationTimingFunctionNameEnum,
  AnimationPlayStateNameEnum,
  AnimationIterationCountNameEnum,
  AnimationIterationCountEnum
} from '@/enums/external/animationEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'

const t = window['$t']
// 全局颜色
const designStore = useDesignStore()

const hoverPreviewAnimate = ref('')

const { targetData } = useTargetData() as {
  targetData: Ref<CreateComponentType | CreateComponentGroupType | Recordable>
}
// 颜色
const themeColor = computed(() => {
  return designStore.getAppTheme
})

// * 选中的动画样式
const activeIndex = (value: string) => {
  const selectValue = targetData.value.styles.animations as string[]
  if (!selectValue.length) return false
  return selectValue[0] === value
}

// * 清除动画
const clearAnimation = () => {
  targetData.value.styles.animations = []
}

// * 新增动画，现只支持一种
const addAnimation = (item: { label: string; value: string }) => {
  targetData.value.styles.animations = [item.value]
}

//动画运行状态配置
const animationPlayStateOption: any[] = [
  {
    label: AnimationPlayStateNameEnum.RUNNING,
    value: AnimationPlayStateEnum.RUNNING
  },
  {
    label: AnimationPlayStateNameEnum.PAUSED,
    value: AnimationPlayStateEnum.PAUSED
  }
]

//动画运行时间函数配置
const animationTimingFunctionOption: any[] = [
  {
    label: AnimationTimingFunctionNameEnum.LINEAR,
    value: AnimationTimingFunctionEnum.LINEAR
  },
  {
    label: AnimationTimingFunctionNameEnum.EASE,
    value: AnimationTimingFunctionEnum.EASE
  },
  {
    label: AnimationTimingFunctionNameEnum.EASEIN,
    value: AnimationTimingFunctionEnum.EASEIN
  },
  {
    label: AnimationTimingFunctionNameEnum.EASEOUT,
    value: AnimationTimingFunctionEnum.EASEOUT
  },
  {
    label: AnimationTimingFunctionNameEnum.EASEINOUT,
    value: AnimationTimingFunctionEnum.EASEINOUT
  }
]

//动画执行次数
const animationIterationCountOption: any[] = [
  {
    label: AnimationIterationCountNameEnum.ITERATIONCOUNT,
    value: AnimationIterationCountEnum.ITERATIONCOUNT
  }
]
</script>

<style lang="scss" scoped>
@include go('chart-configurations-animations') {
  padding: 0;
  .clear-btn {
    width: 100%;
  }
  .animation-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    @include hover-border-color('hover-border-color');
    &:hover,
    &.active {
      color: v-bind('themeColor');
      border: 1px solid v-bind('themeColor');
    }
  }
}
</style>