<template>
  <div
    @mouseenter.ctrl="showOverlay"
    @mouseenter.exact="onHover"
    @mouseleave="onMouseLeave"
    @click.right="showOverlayIfNotSelection"
    v-on="$listeners"
    v-bind="$attrs"
    class="message"
  >
    <div class="message__side">
      <div class="message__side-content">
        <slot name="left-panel"></slot>
      </div>
    </div>
    <div class="message__content">
      <div v-if="!!title || $slots.title" class="text-h4 message__title">
        <slot name="title">{{ title }}</slot>
      </div>
      <div
        v-if="!!subtitle || !!$slots.subtitle"
        class="text-blue-grey q-mt-xs"
      >
        <slot name="subtitle">{{ subtitle }}</slot>
      </div>
      <div
        v-html="text"
        class="message__text"
        :class="{
          'q-mt-md': !!title || !!subtitle || !!$slots.subtitle,
        }"
      ></div>
      <slot name="after-text"></slot>
    </div>
    <div class="message__side">
      <div
        class="message__side-content ui-gap-x-sm message__side-content_right"
      >
        <slot name="right-panel"></slot>
      </div>
    </div>
    <transition
      appear
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <div
        v-if="$slots.overlay"
        class="message-overlay"
        @click.self="hideOverlay"
      >
        <slot name="overlay"></slot>
      </div>
    </transition>
    <slot></slot>
  </div>
</template>

<style lang="sass">
.message__title
  display: flex
  width: 100%

.message__text
  span
    background-color: $yellow-12
</style>

<style lang="sass" scoped>
.message-overlay
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  background-color: rgba(3, 24, 48, 0.7)
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  border-radius: 16px

.message
  position: relative
  border-radius: 16px
  background-color: #fff
  display: flex
  width: 100%
  color: $dark
  box-shadow: 0 1px 2px rgba(3, 24, 48, 0.1)

.message__content
  flex-grow: 1
  padding: 16px 0

.message__text
  white-space: break-spaces
  word-break: break-word
  margin-top: 18px


.message__side
  width: 56px
  flex-shrink: 0
  position: relative

  &-content
    align-items: flex-start
    display: flex
    position: absolute
    left: 0
    top: 0
    bottom: 0
    padding: 12px

    &_right
      padding: 16px 12px
      left: auto
      right: 0
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'

@Component({ inheritAttrs: false })
export default class BaseMessage extends Vue {
  @Prop(String)
  title!: string

  @Prop(String)
  subtitle!: string

  @Prop(String)
  text!: string

  isHover = true

  showOverlayIfNotSelection(event: Event) {
    const selection: Selection | null = document.getSelection()

    if (!selection || selection.type !== 'Range') {
      event.preventDefault()

      this.showOverlay()
    }
  }

  onHover() {
    this.isHover = true
  }

  onMouseLeave() {
    this.isHover = false
    this.hideOverlay()
  }

  @Emit()
  showOverlay() {
    return true
  }

  @Emit()
  hideOverlay() {
    return true
  }
}
</script>
