<template>
  <v-dialog
    v-if="false"
    v-model="modalState"
    max-width="680"
  >
    <v-card>
      <v-card-title class="text-center text-h5">
        <span>{{ demoTitle }}</span>
      </v-card-title>
      <v-card-text
        class="text-justify"
        v-for="subtitle in demoSubtitles"
        :key="subtitle"
      >
        <p>{{ subtitle }}</p>
      </v-card-text>
      <v-card-actions class="mt-4">
        <v-btn
          data-testid="close"
          color="error"
          @click="modalState = false"
          :disabled="!isModalOpen"
        >
          <span>{{ t('labels.continueWithDemo') }}</span>
        </v-btn>
        <v-spacer />
        <v-btn
          v-if="demoType === DemoType.Licence"
          data-testid="confirm"
          variant="flat"
          color="success"
          @click="enquire"
        >
          <span>{{ t('labels.enquireAboutIntegration') }}</span>
        </v-btn>
        <v-btn
          v-else
          data-testid="confirm"
          variant="flat"
          color="success"
          @click="purchase"
        >
          <span>{{ t('labels.purchase3dicom') }}</span>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { openUrl } from '@/functions/openUrl';
import { useDemoStore } from '@/stores/demo.store';
import { PRICING_URL, SUPPORT_URL } from '@/constants';
import { useI18n } from 'vue-i18n';
import { DemoType } from '@3cr/viewer-types-ts';

interface Props {
  isModalOpen?: boolean;
}

withDefaults(defineProps<Props>(), {
  isModalOpen: true,
});

const { t } = useI18n();
const { demoTitle, demoSubtitles, demoType } = storeToRefs(useDemoStore());

const modalState = defineModel('modal', { default: false });

function enquire(): void {
  openUrl(SUPPORT_URL);
}

function purchase(): void {
  openUrl(PRICING_URL);
}
</script>
