<template>
  <div class="w100">
    <div class="w100 column items-center text-center text-grey q-px-md">
      <div class="text-caption">
        {{ $t('subscribe_tariffs__description') }}
      </div>
    </div>
    <q-list separator>
      <q-item
        v-for="item in tariffs"
        :key="item.id"
        clickable
        v-ripple
        tag="label"
        :disable="disableTestTariff(item.id)"
        >
        <q-item-section avatar>
          <q-radio
            v-model="selectedTariff"
            :val="item.id"
            :disable="disableTestTariff(item.id)"
            :keep-color="disableTestTariff(item.id)"
            :color="disableTestTariff(item.id) ? 'grey-5' : ''"
          />
        </q-item-section>
        <q-item-section>
          <div class="column">
            <span class="text-bold">
              {{ item.name }}
            </span>
            <div class="flex no-wrap items-center text-caption" style="line-height: 1em;">
              <span v-if="item.chat_limit">
                {{ $t('subscribe_tariffs__chats_max') + ' ' + item.chat_limit }}
              </span>
              <q-icon v-else name="mdi-all-inclusive" size="sm"/>
              <span class="q-pl-xs">
                {{ $t('subscribe_tariffs__chats')}}
              </span>
            </div>
          </div>
        </q-item-section>
        <q-item-section 
          class="text-left"
          :style="{ width: `${maxWidthStarsSection}px` }"
          >
          <q-resize-observer @resize="updateMaxWidthStarsSection" />
          <div v-if="item.price" class="flex column justify-start">
            <div class="flex no-wrap items-center">
              <telegram-star color="gold" size="18px" class="q-mr-xs"/>
              <span class="text-h6">{{ formatNumber(item.price) }}</span>
              <span class="text-caption q-pl-xs">{{ $t('subscribe_tariffs__per_month') }}</span>
            </div>
          </div>
          <div v-else class="text-bold self-center">
            {{ $t('subscribe_tariffs__free_tax') }}
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import telegramStar from 'components/TelegramStar.vue'
  import { formatNumber } from 'utils/helpers'
  import type { Tariff } from 'types/Tariff'

  const props = withDefaults(defineProps<{
    tariffs: Tariff[]
    currentTariffId?: number
    disable?: boolean
  }>(),
    {
      disable: false
    }
  )

  const emit = defineEmits(['update:selected'])
  
  const selectedTariff = ref<number>()

  const testTariffId = computed(() => props.tariffs.find(el => el.price === 0)?.id)

  watch(() => props.tariffs, () => {
    if (props.currentTariffId !== undefined) {
      selectedTariff.value = props.currentTariffId
    } else if (testTariffId.value) {
      selectedTariff.value = testTariffId.value
    } else if (props.tariffs.length > 0) {
      selectedTariff.value = props.tariffs[0]?.id
    }
  }, { immediate: true })

  watch(() => props.currentTariffId, (newId) => {
    if (newId !== undefined) selectedTariff.value = newId
  })

  watch(selectedTariff, (newVal) => {
    if (newVal !== undefined) emit('update:selected', newVal)
  }, { immediate: true })

  function disableTestTariff (tariffId: number) {
    if (props.disable) return true
    if (!testTariffId.value) return false
    return props.currentTariffId === testTariffId.value || tariffId === testTariffId.value
  }

  const maxWidthStarsSection = ref(0)
  
  function updateMaxWidthStarsSection(size: { width: number, height: number }) {
    if (size.width > maxWidthStarsSection.value) {
      maxWidthStarsSection.value = size.width
    }
  }
</script>

<style scoped>
</style>
