<template>
  <div class="context-menu-overlay" @click.self="$emit('close')">
    <div class="context-menu" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
      <div class="context-menu-image-preview">
        <img :src="image.path" :alt="'Selected Image ' + image.name" />
      </div>
      <div class="context-menu-options">
        <ul v-if="!showStyleSelectorView">
          <li @click="$emit('print', image)">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
              <path fill-rule="evenodd" d="M7.875 1.5C6.839 1.5 6 2.34 6 3.375v2.25a.75.75 0 0 0 1.5 0V3.375c0-.39.315-.75.75-.75h6.75c.39 0 .75.36.75.75v2.25a.75.75 0 0 0 1.5 0V3.375c0-1.036-.84-1.875-1.875-1.875H7.875Z" clip-rule="evenodd" />
              <path fill-rule="evenodd" d="M19.875 9a.75.75 0 0 0-.75-.75H4.875a.75.75 0 0 0-.75.75v6.75c0 1.036.84 1.875 1.875 1.875h11.25c1.036 0 1.875-.84 1.875-1.875V9ZM12 12.75a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5H12Z" clip-rule="evenodd" />
              <path d="M2.25 17.75a.75.75 0 0 0 0 1.5h19.5a.75.75 0 0 0 0-1.5H2.25Z" />
            </svg>
            Drucken
          </li>
          <li @click="showStyleSelectorView = true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
              <path fill-rule="evenodd" d="M10.788 3.212a.75.75 0 0 0-1.06 0L7.212 5.788a.75.75 0 0 0 0 1.06l1.59 1.59a.75.75 0 0 0 1.06 0l2.576-2.576a.75.75 0 0 0 0-1.06L10.788 3.212ZM15.75 10.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 12a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM18.75 10.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM15.75 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM18.75 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM15.75 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM18.75 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 21a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
            </svg>
            Stil ändern
          </li>
          <li @click="$emit('close')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
              <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
            </svg>
            Schließen
          </li>
        </ul>
        <StyleSelector 
          v-else
          :image_id="image.image_id"
          @styleSelected="(style, imageId) => $emit('styleSelected', style, imageId)" 
          @back="showStyleSelectorView = false" 
          @close="$emit('close')" 
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import StyleSelector from './StyleSelector.vue';

const props = defineProps({
  position: {
    type: Object,
    required: true,
  },
  image: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(['close', 'print', 'changeStyle', 'styleSelected']);

const showStyleSelectorView = ref(false);
</script>

<style scoped>
.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Halbdurchsichtiger Hintergrund */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.context-menu {
  background: var(--color-background);
  border: 1px solid var(--color-text);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  flex-direction: row; /* Bild und Menü nebeneinander */
  max-width: 90%;
  height: 80vh; /* 80% of viewport height */
  overflow: hidden;
}

.context-menu-image-preview {
  flex: 7; /* Takes 70% of the space (7 out of 10 parts) */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.context-menu-image-preview img {
  max-width: 100%;
  max-height: 100%;
  width: 80%; /* 80% width of its container */
  object-fit: contain;
}

.context-menu-options {
  flex: 3; /* Takes 30% of the space (3 out of 10 parts) */
  display: flex;
  flex-direction: column;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--color-text); /* Trennlinie zwischen Bild und Menü */
  min-width: 150px; /* Mindestbreite für das Menü */
}

.context-menu li {
  padding: 15px;
  cursor: pointer;
  font-size: 1.1em;
  border-bottom: 1px solid var(--color-text);
}

.context-menu li:last-child {
  border-bottom: none;
}

.context-menu li:hover {
  background: var(--color-text); /* Adjust hover background for dark mode */
  color: var(--color-background); /* Adjust hover text color for dark mode */
}
</style>