<script lang="ts" setup>
import { ref } from 'vue'
import type { ManagedTier, BackupTier } from '@/stores/estimator'
import IPv4Stepper from './IPv4Stepper.vue'
import ManagedSupportSelector from './ManagedSupportSelector.vue'
import BackupTierSelector from './BackupTierSelector.vue'

interface Props {
  ipv4Count: number
  managedTier: ManagedTier
  backupTier: BackupTier
  pilotAvailable: boolean
  cycleSuffix: string
  monthlyMultiplier: number
}

defineProps<Props>()

const emit = defineEmits<{
  'update:ipv4Count': [value: number]
  'update:managedTier': [value: ManagedTier]
  'update:backupTier': [value: BackupTier]
  'request-upgrade': []
}>()

const expanded = ref<boolean>(false)
</script>

<template>
  <VCard
    variant="outlined"
    class="addons-panel"
    :class="{ 'addons-panel--open': expanded }"
  >
    <button
      type="button"
      class="addons-panel__header"
      :aria-expanded="expanded"
      @click="expanded = !expanded"
    >
      <VIcon icon="tabler-adjustments-horizontal" class="me-2" />
      <span class="text-subtitle-1 font-weight-bold">Customize add-ons</span>
      <VSpacer />
      <span class="text-caption text-medium-emphasis me-3 d-none d-sm-inline">
        IPv4, Managed support, Backup
      </span>
      <VIcon :icon="expanded ? 'tabler-chevron-up' : 'tabler-chevron-down'" />
    </button>

    <VExpandTransition>
      <div v-show="expanded" class="addons-panel__body">
        <VDivider class="mb-5" />

        <IPv4Stepper
          :model-value="ipv4Count"
          :cycle-suffix="cycleSuffix"
          @update:model-value="(v: number) => emit('update:ipv4Count', v)"
        />

        <VDivider class="my-5" />

        <ManagedSupportSelector
          :model-value="managedTier"
          :pilot-available="pilotAvailable"
          :cycle-suffix="cycleSuffix"
          :monthly-multiplier="monthlyMultiplier"
          @update:model-value="(v: ManagedTier) => emit('update:managedTier', v)"
          @request-upgrade="emit('request-upgrade')"
        />

        <VDivider class="my-5" />

        <BackupTierSelector
          :model-value="backupTier"
          :cycle-suffix="cycleSuffix"
          :monthly-multiplier="monthlyMultiplier"
          @update:model-value="(v: BackupTier) => emit('update:backupTier', v)"
        />
      </div>
    </VExpandTransition>
  </VCard>
</template>

<style lang="scss" scoped>
.addons-panel {
  border-radius: 16px !important;
  background: rgba(var(--v-theme-surface), 0.6) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(var(--v-theme-on-surface), 0.08) !important;
  transition: border-color 0.2s ease;
}

.addons-panel--open {
  border-color: rgba(var(--v-theme-primary), 0.3) !important;
}

.addons-panel__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;

  &:hover {
    background: rgba(var(--v-theme-on-surface), 0.03);
  }
}

.addons-panel__body {
  padding: 0 22px 22px;
}
</style>
