<template>
  <v-dialog
    :model-value="modelValue"
    transition="dialog-right-transition"
    width="550"
    persistent
    @update:model-value="emit('update:modelValue', $event)"
  >
    <v-card>
      <v-toolbar
        style="height: 12px"
        :color="isDark ? 'grey-darken-4' : 'white'"
      >
        <v-spacer></v-spacer>
        <v-btn
          color="grey-darken-1"
          icon="mdi-close"
          @click="emit('update:modelValue', false)"
        ></v-btn>
      </v-toolbar>

      <v-card-text style="padding: 0 !important">
        <v-container>
          <v-row no-gutters class="text-center">
            <v-col cols="12">
              <p class="font-weight-bold text-h5 mb-3">{{ header }}</p>
              <p>{{ subText }}</p>
            </v-col>

            <v-col cols="12" class="mt-5">
              <!-- UPPER QR -->
              <v-row no-gutters>
                <v-col cols="6">
                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
                </v-col>
                <v-col cols="6">
                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
                </v-col>
              </v-row>

              <!-- CENTER QR -->
              <img v-if="qrLarge" :src="qrLarge" width="130" height="130" class="my-2" />

              <!-- LOWER QR -->
              <v-row no-gutters>
                <v-col cols="6">
                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
                </v-col>
                <v-col cols="6">
                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
                </v-col>
              </v-row>
            </v-col>

            <v-col cols="12" class="mt-5">
              <p class="font-weight-bold text-h5 mb-2">Company Name</p>
              <p class="font-weight-bold text-h5 mb-3">BL 01/03/24</p>
              <p class="mb-1">{{ `Date: ${dateStr} ${timeStr}` }}</p>
              <p class="mb-1">Access: Door</p>
              <p>Scan and press level 1. One time use.</p>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import { useTheme } from "vuetify";
import QRCode from "qrcode";

defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  header: {
    type: String,
    default: "",
  },
  subText: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue"]);

const { global: themeGlobal } = useTheme();
const isDark = computed(() => themeGlobal.current.value.dark);

const qrSmall = ref<string>("");
const qrLarge = ref<string>("");

onMounted(async () => {
  qrSmall.value = await QRCode.toDataURL("123123", { width: 80, margin: 1 });
  qrLarge.value = await QRCode.toDataURL("123123", { width: 130, margin: 1 });
});

const now = new Date();
const dateStr = now.toLocaleDateString();
const timeStr = now.toLocaleTimeString();
</script>
