<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  modelValue: number
  min?: number
  max?: number
  pricePerExtra?: number
  cycleSuffix?: string
}

const props = withDefaults(defineProps<Props>(), {
  min: 1,
  max: 8,
  pricePerExtra: 8,
  cycleSuffix: '/mo',
})

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const extras = computed<number>(() => Math.max(0, props.modelValue - 1))

const totalCost = computed<number>(() => extras.value * props.pricePerExtra)

function decrement(): void {
  if (props.modelValue > props.min) emit('update:modelValue', props.modelValue - 1)
}

function increment(): void {
  if (props.modelValue < props.max) emit('update:modelValue', props.modelValue + 1)
}
</script>

<template>
  <div class="ipv4-stepper d-flex align-center justify-space-between flex-wrap ga-3">
    <div>
      <div class="text-subtitle-2 font-weight-bold">IPv4 Addresses</div>
      <div class="text-caption text-medium-emphasis">
        First IPv4 included free · ${{ pricePerExtra }} per extra
      </div>
    </div>

    <div class="d-flex align-center ga-3">
      <div class="ipv4-stepper__counter d-flex align-center">
        <VBtn
          icon="tabler-minus"
          size="x-small"
          variant="tonal"
          :disabled="modelValue <= min"
          aria-label="Decrease IPv4 count"
          @click="decrement"
        />
        <div class="ipv4-stepper__value">{{ modelValue }}</div>
        <VBtn
          icon="tabler-plus"
          size="x-small"
          variant="tonal"
          :disabled="modelValue >= max"
          aria-label="Increase IPv4 count"
          @click="increment"
        />
      </div>

      <div class="ipv4-stepper__price">
        <template v-if="extras === 0">
          <span class="text-caption text-medium-emphasis">included</span>
        </template>
        <template v-else>
          <span class="font-weight-bold text-primary">+${{ totalCost.toFixed(2) }}</span>
          <span class="text-caption text-medium-emphasis ms-1">{{ cycleSuffix }}</span>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ipv4-stepper__counter {
  background: rgba(var(--v-theme-on-surface), 0.06);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.ipv4-stepper__value {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ipv4-stepper__price {
  min-width: 80px;
  text-align: end;
}
</style>
