<template>
  <v-overlay
    v-bind="$attrs"
    v-model="modelValue"
    persistent
    width="503px"
    :scrim="false"
    location-strategy="connected"
    :target="target"
  >
    <v-card class="position-relative mx-5">
      <v-card-title class="pt-4">
        <span>{{ t('labels.annotationCreate') }}</span>
        <v-btn
          variant="text"
          icon="close"
          color="shark_400"
          data-testid="close-btn"
          @click="cancel"
          class="position-absolute"
          style="top: 0; right: 0"
        />
      </v-card-title>
      <v-card-subtitle>
        <span>{{ t('texts.annotationCreateHelp') }}</span>
      </v-card-subtitle>
      <v-card-text class="pb-1">
        <AnnotationForm
          v-if="proxy"
          v-model="proxy"
        />
      </v-card-text>
      <v-card-actions class="px-6 pb-4">
        <v-spacer />
        <v-btn
          class="px-4 py-2"
          color="minsk_900"
          variant="plain"
          @click="cancel"
        >
          <span>{{ t('labels.cancel') }}</span>
        </v-btn>
        <v-btn
          class="px-4 py-2"
          color="minsk_900"
          variant="flat"
          data-testid="submit-btn"
          @click="create()"
        >
          <span>{{ t('labels.confirm') }}</span>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-overlay>
  <AnnotationCreateSnackbar v-model="s_annotationCreate" />
</template>

<script setup lang="ts">
import { useViewer3cr } from '@/composables/useViewer3cr';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useToolStore } from '@/stores/tool.store';
import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';

interface Props {
  annotation?: DataOverlayAnnotation | null;
  returnTo?: string;
}

const props = withDefaults(defineProps<Props>(), {
  annotation: null,
  returnTo: '',
});

const { t } = useI18n();
const { annotationCreateTool } = useToolStore();
const viewer3cr = useViewer3cr();

const proxy = ref<DataOverlayAnnotation>();
const s_annotationCreate = ref<boolean>(false);

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

const target = computed(() => annotationCreateTool.position.value);

watch(
  () => props.annotation,
  (value) => {
    if (value) {
      proxy.value = JSON.parse(JSON.stringify(value));
    }
  },
  { immediate: true },
);

async function create(): Promise<void> {
  // Nested serialization required for 3CR
  const payload = JSON.parse(JSON.stringify(proxy.value));
  payload.CallToAction.Actions = payload.CallToAction.Actions.map(
    (action: any) => ({
      ActionType: action.ActionType,
      ActionData: JSON.stringify(action.ActionData),
    }),
  );
  payload.CallToAction = JSON.stringify(payload.CallToAction);

  await viewer3cr.createAnnotation2dTool({
    message: undefined,
    returnChannel: payload,
    returnTo: props.returnTo,
  });

  modelValue.value = false;
  s_annotationCreate.value = true;
}

async function cancel(): Promise<void> {
  modelValue.value = false;
}

defineExpose({ s_annotationCreate });

defineOptions({ inheritAttrs: false });
</script>
