<template>
  <div class="more-actions">
    <a
      :class="{ 'more-actions__toggle--background': background }"
      class="more-actions__toggle"
      data-cy="toggle-more-actions-menu"
      @click.stop="toggleMenu"
    >
      <ellipses />
    </a>
    <widget-popover class="more-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
      <slot :toggle="toggleMenu" />
    </widget-popover>
  </div>
</template>

<script>
import WidgetPopover from '@/components/ui/WidgetPopover';
const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses');

export default {
  props: {
    background: {
      type: Boolean,
      default: false,
    },
  },

  components: {
    Ellipses,
    WidgetPopover,
  },
  data() {
    return {
      showMenu: false,
    };
  },

  methods: {
    toggleMenu: function () {
      this.showMenu = !this.showMenu;
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.more-actions {
  svg {
    width: 30px;
    fill: $color-charcoal-dark;
    //margin-right: 15px;
  }

  &__toggle {
    display: flex;
    border-radius: 5px;

    &--background {
      background: white;
    }
  }
}
</style>
