<template>
  <v-dialog v-model="modelValue" max-width="1000">
    <v-card>
      <v-row no-gutters>
        <v-col class="pa-8">
          <p class="text-h5 font-weight-bold">
            <span class="text-primary font-italic">Add more credits</span> to unlock DICOM capabilities.
          </p>
          <!-- TODO: Replace lorem text -->
          <p class="mt-2 text-body-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <v-list v-model:selected="selected" selectable>
            <template v-for="product in products">
              <v-list-item class="py-4">
                <template #title>
                  <span class="font-weight-bold">{{ product.credits }} credits</span>
                </template>
                <template #subtitle>
                  <span>{{ product.description }}</span>
                </template>
                <template #append="{ isSelected }">
                  <div class="mr-4">
                    <div class="text-right">
                      <span class="font-weight-bold">${{ (product.amount / 100).toFixed(2) }}</span>
                    </div>
                    <div v-if="product.discount">
                      <v-chip class="discount">
                        <span class="font-weight-bold">{{ product.discount }}% off</span>
                      </v-chip>
                    </div>
                  </div>
                  <v-icon color="primary" :icon="isSelected ? 'filled:check_circle' : 'radio_button_unchecked'" />
                </template>
              </v-list-item>
            </template>
          </v-list>
          <v-btn class="purchase" block variant="flat" append-icon="arrow_outward" @click="purchase">
            <span>Purchase credits</span>
          </v-btn>
        </v-col>
        <v-col class="pa-8 bg-background">
          <div class="align-center d-flex flex-column h-100 justify-center">
            <img alt="elevate" width="75%" src="@/assets/images/illustration.svg" />
            <p class="font-weight-bold text-center text-h5">Elevate your DICOM experience</p>
            <p class="mt-2 text-center text-body-2">
              Upgrade your DICOM experience through our integrated AI models to elevate your health outcomes.
            </p>
          </div>
        </v-col>
      </v-row>
    </v-card>
  </v-dialog>
</template>

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

interface CreditProduct {
  credits: number;
  description: string;
  amount: number;
  discount?: number;
}

const selected = ref(0);

const modelValue = defineModel<boolean>({ default: false });

const products = computed<CreditProduct[]>(() => [
  {
    credits: 10,
    description: 'Perfect for additional annotations.',
    amount: 1000
  },
  {
    credits: 25,
    description: 'Recommended option.',
    amount: 1995,
    discount: 20
  },
  {
    credits: 50,
    description: 'More supportive text for use case.',
    amount: 3750,
    discount: 25
  },
  {
    credits: 100,
    description: 'More supportive text for use case.',
    amount: 6995,
    discount: 30
  },
  {
    credits: 250,
    description: 'Final supportive text for use case.',
    amount: 14995,
    discount: 40
  }
]);

function purchase(): void {
  // TODO: implementation
}
</script>

<style scoped lang="scss">
@use '@/assets/palette' as palette;
@use '@/assets/settings' as settings;

.v-btn.purchase {
  color: rgb(var(--v-theme-surface));
  background-color: map-get(palette.$minsk, 900);
}

.v-chip.discount {
  color: map-get(palette.$minsk, 200);
  border-radius: settings.$border-radius-root !important;
  border-color: map-get(palette.$minsk, 200) !important;
  border-width: 2px;
  height: calc(var(--v-chip-height) - 4px);
  padding: 0 4px;

  :deep(.v-chip__content) {
    color: map-get(palette.$minsk, 900);
  }
}

.v-list-item {
  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
  border-width: settings.$border-width-root;

  &:first-child {
    border-top-left-radius: settings.$border-radius-root !important;
    border-top-right-radius: settings.$border-radius-root !important;
  }

  &:last-child {
    border-bottom-left-radius: settings.$border-radius-root !important;
    border-bottom-right-radius: settings.$border-radius-root !important;
  }
}
</style>
