<template>
  <v-dialog width="545" max-height="90vh">
    <template v-slot:default="{ isActive }">
      <v-btn
        size="56px"
        variant="flat"
        style="border-radius: 50px; position: absolute; top: -28px; left: 50%; transform: translateX(-50%)"
        color="amaranth_200"
      >
        <v-icon color="amaranth_800" icon="front_hand" size="30px" />
      </v-btn>
      <v-sheet
        style="background-color: rgba(247, 247, 248, 1); border-radius: 8px; position: relative; overflow: visible"
      >
        <v-btn
          size="56px"
          variant="flat"
          style="border-radius: 50px; position: absolute; top: -28px; left: 50%; transform: translateX(-50%)"
          color="amaranth_200"
        >
          <v-icon color="amaranth_800" icon="front_hand" size="30px" />
        </v-btn>
        <v-card-text class="text-center text-h4 pt-10 pb-4 pl-4 pr-4">
          You don’t have access to this series
        </v-card-text>
        <v-card-text class="mb-4 ml-4 mr-4 mt-4">
          <v-row class="text-sm-regular" justify="space-between">
            <v-col cols="5" class="text-left">
              <v-row>Signed in as:</v-row>
              <v-row class="pt-4">DICOM series owner:</v-row>
            </v-col>

            <v-col cols="5" class="text-right ml-auto mr-8" style="font-weight: 500 !important; color: #1d1d20">
              <v-row>{{ currentEmail }}</v-row>
              <v-row class="pt-4">{{ linkedEmail }}</v-row>
            </v-col>
          </v-row>
        </v-card-text>
        <v-divider class="ml-4 mr-4" />
        <v-card-text class="text-sm-regular"
          >To view this DICOM series, sign in with an account that has been given permissions to access this series.
          Alternatively, you can request access to this DICOM series.</v-card-text
        >
        <v-divider class="mt-4" />
        <v-card-actions class="px-4 py-3">
          <v-btn
            data-testid="verifyBtn"
            class="mr-auto px-4 bg-white"
            color="minsk_900"
            variant="outlined"
            text="Verify Ownership"
            @click="verifyOwnership"
          />
          <v-btn class="ml-auto" color="minsk_900" text="Cancel" @click="isActive.value = false" />
          <v-btn class="px-6 bg-minsk-900" variant="outlined" text="Request Access" @click="requestAccess" />
        </v-card-actions>
      </v-sheet>
    </template>
  </v-dialog>
  <v-snackbar data-testid="snackBar" v-model="snackbar" class="pb-4 shark-950" timeout="120000" variant="flat">
    <v-icon class="pr-3" color="minsk_300" icon="check_circle" size="large" />
    <span class="text-center" style="color: white; font-weight: 500; line-height: 20px">Email Notification sent</span>
    <template #actions>
      <v-btn color="minsk_300" variant="flat" class="mr-2 px-4 ml-auto">Undo</v-btn>
      <v-icon
        data-testid="closeSnackbar"
        class="ml-auto mr-3 shark-400"
        icon="close"
        size="small"
        @click="snackbar = false"
      />
    </template>
  </v-snackbar>
  <v-snackbar data-testid="snackBarTest" v-model="snackbarTest" class="pb-4 shark-950" timeout="10" variant="flat">
    <v-icon class="pr-3" color="minsk_300" size="large" />
    <span class="text-center" style="color: white; font-weight: 500; line-height: 20px">Verify Ownership</span>
  </v-snackbar>
</template>

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

const currentEmail = ref('current.email@loggedinas.com.au');
const linkedEmail = ref('email.address@linkedaccount.com');
const snackbar = ref(false);
const snackbarTest = ref(false);

function verifyOwnership(): void {
  //TODO: define logic of verification request - the snackbarTest is for testing purposes
  snackbarTest.value = true;
}

function requestAccess(): void {
  // TODO: define logic for request access
  snackbar.value = true;
}
defineExpose({ requestAccess, verifyOwnership, snackbar, snackbarTest });
</script>
