<template>
  <div
    data-cy="highlight-popover"
    class="highlight-popover"
  >
    <section class="highlight-popover__section">
      <div
        class="highlight-popover__color highlight-popover__color--yellow"
        data-cy="highlight-alpha"
        @click="$emit('choose-color', 'alpha')"
      ></div>
      <div
        class="highlight-popover__color highlight-popover__color--pink"
        data-cy="highlight-beta"
        @click="$emit('choose-color', 'beta')"
      ></div>
      <div
        class="highlight-popover__color highlight-popover__color--blue"
        data-cy="highlight-gamma"
        @click="$emit('choose-color', 'gamma')"
      ></div>
    </section>
    <section class="highlight-popover__section">
      <note-icon
        class="highlight-popover__icon"
        data-cy="highlight-note"
        @click="$emit('note')"
      />
    </section>
    <section
      class="highlight-popover__section"
      v-if="showDelete"
    >
      <trash-icon
        class="highlight-popover__icon"
        data-cy="highlight-delete"
        @click="confirmDelete"
      />
    </section>
  </div>
</template>

<script setup lang="ts">
import NoteIcon from '@/components/icons/NoteIcon.vue';
import TrashIcon from '@/components/icons/TrashIcon.vue';
import modal from '@/helpers/modalService';
export interface Props {
  top: string;
  showDelete: boolean;
}

const emit = defineEmits(['close', 'confirm', 'choose-color', 'delete']);
defineProps<Props>();
const confirmDelete = () => {
  modal
    .show()
    .then(() => {
      console.log('promise resolved');
      emit('delete');
    })
    .catch(() => {
      console.log('promise rejected');
    });
};
</script>

<style lang="postcss">
.highlight-popover {
  position: absolute;
  z-index: 80;
  top: calc(v-bind(top) - 80px);

  background-color: white;
  padding: var(--medium-spacing);
  border-radius: var(--default-border-radius);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);

  display: flex;

  &__color {
    width: 38px;
    height: 38px;
    background-color: red;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;

    &--yellow {
      background-color: var(--mark-alpha);
    }
    &--pink {
      background-color: var(--mark-beta);
    }
    &--blue {
      background-color: var(--mark-gamma);
    }
  }

  &__section {
    padding-right: var(--medium-spacing);
    padding-left: var(--medium-spacing);
    border-right: 1px solid var(--color-silver);
    display: flex;
    flex-direction: row;
    gap: var(--small-spacing, 10px);
    align-items: center;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      border-right: 0;
      padding-right: 0;
    }
  }

  &__icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
}
</style>
