<template>
  <transition name="fade">
    <div
        v-if="isOpen"
        class="fl-chess-modal-actions"
        :style="style"
        ref="modal"
    >
      <div
          v-for="(action, i) in options.actions"
          :key="`action-${i}`"
          class="fl-chess-modal-action"
          @click="clickActions(action)"
      >
        {{ action.name }}
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'FlChessModalActions',
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },

    event: {
      type: [MouseEvent, Object]
    }
  },

  data () {
    return {
      style: ''
    }
  },

  computed: {
    ...mapState(['options'])
  },

  methods: {
    clickActions (action) {
      this.$root.$emit('action', action)
    }
  },

  watch: {
    isOpen: {
      handler (value) {
        this.$nextTick(() => {
          if (value) {
            const container = document.getElementById('fl-chess-rooms-container').getBoundingClientRect()
            this.style = `top:${this.event.pageY - container.top + 10}px;`
            const diff = document.documentElement.offsetWidth - this.event.pageX
            if (diff <= this.$refs.modal.getBoundingClientRect().width) {
              this.style += `right: ${diff}px`
              return
            }
            this.style += `left: ${this.event.pageX - container.left}px`
          }
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.fl-chess-modal-actions {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  padding: 12px;
  background: $light-01;
  border-radius: $border-radius;
  box-shadow: 0 4px 16px rgba($black-01, 0.1);

  @include flex-column-center;
}

.fl-chess-modal-action {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 20px;
  color: $black-02;
  background: $grey-03;
  border-radius: 16px;
  cursor: pointer;

  @include flex-center;

  &:first-child {
    color: $light-01;
    background: $primary;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.4s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
