<template>
  <div class="highlight-popover">
    <section class="highlight-popover__section">
      <div
        class="highlight-popover__color highlight-popover__color--yellow"
        @click="$emit('choose-color', 'alpha')"
      ></div>
      <div
        class="highlight-popover__color highlight-popover__color--pink"
        @click="$emit('choose-color', 'beta')"
      ></div>
      <div
        class="highlight-popover__color highlight-popover__color--blue"
        @click="$emit('choose-color', 'gamma')"
      ></div>
    </section>
    <section class="highlight-popover__section">
      <note-icon
        class="highlight-popover__icon"
        @click="$emit('confirm')"
      />
    </section>
    <section class="highlight-popover__section">
      <trash-icon
        class="highlight-popover__icon"
        @click="$emit('close')"
      />
    </section>
  </div>
</template>

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

defineEmits(['close', 'confirm', 'choose-color']);
defineProps<Props>();
</script>

<style lang="postcss">
.highlight-popover {
  position: absolute;
  z-index: 99;
  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%;

    &--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;
  }
}
</style>
