<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import AnalysisContentTitle from './analysis-content-title.vue'
import { UsageItemInfo } from '../types'

enum UsageTimeDimension {
  day = 'analysis_module.today_usage',
  week = 'analysis_module.current_week_usage',
  month = 'analysis_module.current_month_usage',
}

interface Props {
  usageItem: UsageItemInfo
}

const { t } = useI18n()

defineProps<Props>()

const getUsageTimeDimension = (timeDimension: string): string => {
  switch (timeDimension) {
    case 'today':
      return UsageTimeDimension.day
    case 'week':
      return UsageTimeDimension.week
    case 'month':
      return UsageTimeDimension.month
    default:
      return ''
  }
}
</script>

<template>
  <div class="py-5">
    <AnalysisContentTitle :title="t(getUsageTimeDimension(usageItem.timeDimension))" class="ml-[34px]" />

    <div class="text-font-color mt-4.5 flex w-full gap-2">
      <div class="flex flex-1 flex-col items-center">
        <div class="relative">
          <div class="font-600 text-[30px]">
            <n-number-animation :from="0" :to="usageItem.dataAnalyzeInfo?.usersCount?.num || 0" />
          </div>
          <div class="absolute right-[-23px] top-0">
            <i
              v-show="usageItem.dataAnalyzeInfo?.usersCount?.fluctuate === 1"
              class="iconfont icon-increase text-[#2cb755]"
            />
            <i
              v-show="usageItem.dataAnalyzeInfo?.usersCount?.fluctuate === -1"
              class="iconfont icon-decrease text-error-font-color"
            />
            <i
              v-show="usageItem.dataAnalyzeInfo?.usersCount?.fluctuate === 0"
              class="iconfont icon-stable text-gray-font-color"
            />
          </div>
        </div>

        <span class="mt-1.5">{{ t('analysis_module.agent_users') }}</span>
      </div>

      <div class="flex flex-1 flex-col items-center">
        <div class="relative">
          <div class="font-600 text-[30px]">
            <n-number-animation :from="0" :to="usageItem.dataAnalyzeInfo?.usageCount?.num" />
          </div>
          <div class="absolute right-[-23px] top-0">
            <i
              v-show="usageItem.dataAnalyzeInfo?.usageCount?.fluctuate === 1"
              class="iconfont icon-increase text-[#2cb755]"
            />
            <i
              v-show="usageItem.dataAnalyzeInfo?.usageCount?.fluctuate === -1"
              class="iconfont icon-decrease text-error-font-color"
            />
            <i
              v-show="usageItem.dataAnalyzeInfo?.usageCount?.fluctuate === 0"
              class="iconfont icon-stable text-gray-font-color"
            />
          </div>
        </div>

        <span class="mt-1.5">{{ t('analysis_module.send_messages') }}</span>
      </div>

      <div class="flex flex-1 flex-col items-center">
        <div class="relative">
          <div class="font-600 text-[30px]">
            <n-number-animation :from="0" :to="usageItem.dataAnalyzeInfo?.pointsCount?.num || 0" :precision="1" />
          </div>
          <div class="absolute right-[-23px] top-0">
            <i
              v-show="usageItem.dataAnalyzeInfo?.pointsCount?.fluctuate === 1"
              class="iconfont icon-increase text-[#2cb755]"
            />
            <i
              v-show="usageItem.dataAnalyzeInfo?.pointsCount?.fluctuate === -1"
              class="iconfont icon-decrease text-error-font-color"
            />
            <i
              v-show="usageItem.dataAnalyzeInfo?.pointsCount?.fluctuate === 0"
              class="iconfont icon-stable text-gray-font-color"
            />
          </div>
        </div>

        <span class="mt-1.5">{{ t('analysis_module.consume_points') }}</span>
      </div>
    </div>
  </div>
</template>
