<script setup lang="ts">
import ArrowCurrency from '#adata-ui/icons/currency/currency-down.vue'
import UsdIcon from '#adata-ui/icons/currency/currency-usd.vue'
import EurIcon from '#adata-ui/icons/currency/currency-eur.vue'
import RubIcon from '#adata-ui/icons/currency/currency-rub.vue'
import YuanIcon from '#adata-ui/icons/currency/currency-yuan.vue'

interface Props {
  daysRemaining: number
  limitRemaining: number
  moduleName: string
  isAuthenticated: boolean
}

const props = withDefaults(defineProps<Props>(), {
  moduleName: 'counterparty'
})

const { t } = useI18n()

interface ResponseData<DataResult> {
  success: boolean
  message: string
  data: DataResult
}

interface Currency {
  buy: number
  buy_state: string
  currency: 'USD' | 'EUR' | 'RUB' | 'CNY'
  sell: number
  sell_state: string
}

interface Currencies {
  currencies: Currency[]
  request_time: string
  time: string
}

const currencies = ref<Currency[]>([])
const systemMessage = ref(null)
const isOpenNotification = ref(false)
const message = useCookie('message')

const mode = computed(() => {
  if (props.moduleName === 'pk') {
    return 'counterparty'
  } else {
    return props.moduleName
  }
})

const fetchCurrencies = async () => {
  try {
    const response = await fetch('https://users.adata.kz/api/v1/information/currency')
    const { data } = await response.json()

    if (data.currencies) {
      currencies.value = data.currencies
    }
  } catch (e) {
    console.error(e.message)
  }
}

const Symbols = {
  USD: UsdIcon,
  EUR: EurIcon,
  RUB: RubIcon,
  CNY: YuanIcon
}

const computedClass = (state: string) =>
  state === 'UP' ? 'text-green-400 rotate-180' : 'text-red-400'

const fetchNotification = async () => {
  try {
    if (message.value === undefined) {
      const link = `https://users.adata.kz/api/v1/system-messages/active-list/?module_name=${mode.value}`
      const response = await fetch(link)
      const { data } = await response.json()

      if (data.details.length) {
        systemMessage.value = data.details[0].message
        isOpenNotification.value = true
      }
    }
  } catch (e) {
    console.error(e.message)
  }
}

onBeforeMount(() => {
  fetchNotification()
  fetchCurrencies()
})

const closeMessage = () => {
  message.value = false
  isOpenNotification.value = false
}
</script>

<template>
  <div class="min-h-[40px]" :class="[isOpenNotification && systemMessage ? '' : 'hidden lg:block']">
    <transition name="fade">
      <div
        v-if="isOpenNotification && systemMessage"
        class="bg-[#FFF5E6] px-2 py-3 text-[#FCA204] dark:bg-[#161617] md:px-0"
      >
        <div class="a-container flex items-center justify-between">
          <div class="flex items-center gap-2">
            <a-icon-info-circle
              class="max-h-[16px] w-full max-w-[16px] stroke-orange-500 dark:stroke-orange-500"
            />
            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
          </div>
          <a-icon-x-mark
            class="max-h-[16px] w-full max-w-[16px] cursor-pointer stroke-orange-500"
            @click="closeMessage"
          />
        </div>
      </div>
    </transition>
    <div
      v-if="!isOpenNotification || !systemMessage"
      class="hidden min-h-10 bg-gray-50 dark:bg-gray-950 lg:block"
    >
      <div class="a-container flex justify-between py-2 text-sm">
        <div class="flex items-center">
          <div v-for="currency in currencies" :key="currency.currency" class="mr-4 flex gap-2">
            <div class="flex items-center">
              <component
                :is="Symbols[currency.currency]"
                class="mr-2 size-4 rounded-sm border border-solid border-[#E0E3E6] dark:border-[#2B2B2C]"
              />
              {{ currency.buy }}
              <div :class="computedClass(currency.sell_state)">
                <arrow-currency />
              </div>
            </div>
            <div class="flex items-center">
              {{ currency.sell }}
              <div :class="computedClass(currency.sell_state)">
                <arrow-currency />
              </div>
            </div>
          </div>
        </div>
        <div v-if="isAuthenticated" class="flex items-center gap-5">
          <div v-if="limitRemaining != null || limitRemaining != undefined">
            <span class="mr-2 text-xs">{{ t('header.top.requestLimit') }}</span>
            <a-status-badge size="sm">
              {{ limitRemaining }}
            </a-status-badge>
          </div>
          <div v-if="daysRemaining">
            <span class="mr-2 text-xs">{{ t('header.top.daysLeft') }}</span>
            <a-status-badge size="sm">
              {{ daysRemaining }}
            </a-status-badge>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: 0.1s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  top: 0px;
}
</style>
