<template>
  <div
    class="popover__wrapper"
    @mouseenter="onMouseEnter()" @mouseleave="onMouseLeave()"
  >
    <div class="popover__title">
      <slot :event="event">{{ event.id }}</slot>
    </div>
    <div class="popover__content" v-if="showingPopup">
      <dl class="popover_content__dl">
        <div v-if="eventLink" class="dl-id" title="ID">
          <dt>ID</dt>
          <dd><router-link :to="eventLink">{{ event.id }}</router-link></dd>
        </div>
        <div v-if="
          event.eventChangeTo || event.eventChangeFrom
        " class="dl-eventchange" title="振替 / 取消">
          <dt>振替 / 取消</dt>
          <dd>
            <p
              v-if="event.eventChangeTo && event.eventChangeTo.toEvent == null"
            >
              このイベントは取消済みです<br />
              原因リソース: {{
                event.eventChangeTo.causeResources.map(
                  getResourceDisplayText
                ).join(', ')
              }}
            </p>
            <p
              v-if="event.eventChangeTo && event.eventChangeTo.toEvent != null"
            >
              このイベントは<EventLink :event="event.eventChangeTo.toEvent">別のイベント</EventLink>に振替済みです<br />
              原因リソース: {{
                event.eventChangeTo.causeResources.map(
                  getResourceDisplayText
                ).join(', ')
              }}
            </p>
            <p
              v-if="event.eventChangeFrom"
            >
              このイベントは<EventLink :event="event.eventChangeFrom.fromEvent">別のイベント</EventLink>の振替先です<br />
              原因リソース: {{
                event.eventChangeFrom.causeResources.map(
                  getResourceDisplayText
                ).join(', ')
              }}
            </p>
          </dd>
        </div>
        <div class="dl-type" title="種別">
          <dt>種別</dt>
          <dd>{{ { standard: '標準', lesson: '授業' }[event.type] }}</dd>
        </div>
        <div class="dl-resources" title="リソース">
          <dt>リソース</dt>
          <dd>
            <ul>
              <li v-for="resource, idx in event.resources" :key="resource.id">
                <span v-if="!resourceViewLinks[idx]">
                  {{ getResourceDisplayText(resource) }}
                </span>
                <router-link v-else :to="resourceViewLinks[idx]">
                  {{ getResourceDisplayText(resource) }}
                </router-link>
              </li>
            </ul>
          </dd>
        </div>
        <div class="dl-time" title="時刻">
          <dt>時刻</dt>
          <dd>
            <template
              v-if="cmp(event.startTime.date(), event.endTime.date()) === 0"
            >
              <DateTime :value="event.startTime.date()" />
              <DateTime :value="event.startTime.timetz()" /> -
              <DateTime :value="event.endTime.timetz()" />
            </template>
            <template v-else>
              <DateTime :value="event.startTime" /> -
              <DateTime :value="event.endTime" />
            </template>
            <template v-if="event.timeLabel">
              ({{ event.timeLabel.label }})
            </template>
          </dd>
        </div>
        <div class="dl-memo" title="メモ">
          <dt>メモ</dt><dd>{{ event.memo }}</dd>
        </div>
        <div class="dl-color" title="色">
          <dt>色</dt>
          <dd>
            <span class="colorbox" :style="{'--colorbox-color': event.color}">
            </span>
          </dd>
        </div>
        <template v-if="event.type === 'lesson'">
          <div class="dl-subject" title="教科">
            <dt>教科</dt><dd>{{ event.subject }}</dd>
          </div>
          <div class="dl-frame" title="枠">
            <dt>枠</dt><dd>{{ event.frame }}</dd>
          </div>
        </template>
      </dl>
    </div>
  </div>
</template>

<script>
import { cmp } from '@silane/datetime';
import { ref, computed } from 'vue';

import { inject, keys as injectionKeys } from '../../injection';
import { getResourceDisplayText } from '../../common/zkan-utils.js';


export default {
  name: 'EventPopover',
  props: {
    event: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const links = inject(injectionKeys.links, null);

    const showingPopup = ref(false);

    const eventLink = computed(() => links?.eventLinkFn(props.event) ?? null);
    const resourceViewLinks = computed(() => props.event.resources.map(
      r => links?.resourceViewLinkFn(r) ?? null
    ));

    let mouseLeaveTimerId = 0;
    function onMouseEnter() {
      clearTimeout(mouseLeaveTimerId);
      showingPopup.value = true;
    }
    function onMouseLeave() {
      clearTimeout(mouseLeaveTimerId);
      mouseLeaveTimerId = setTimeout(() => {
        mouseLeaveTimerId = 0
        showingPopup.value = false;
      }, 500);
    }

    return {
      cmp, showingPopup, eventLink, resourceViewLinks, getResourceDisplayText,
      onMouseEnter, onMouseLeave,
    };
  },
}
</script>

<style scoped>
.popover_content__dl {
  display: grid;
  grid-template-areas:
    "eventchange eventchange eventchange eventchange eventchange"
    "type subject frame memo color"
    "resources resources resources resources resources"
    "time time time time time"
    "id id id id id";
  column-gap: .2em;
}
.dl-id {
  grid-area: id;
}
.dl-type {
  grid-area: type;
}
.dl-resources {
  grid-area: resources;
}
.dl-time {
  grid-area: time;
}
.dl-memo {
  grid-area: memo;
}
.dl-color {
  grid-area: color;
}
.dl-eventchange {
  grid-area: eventchange;
}
.dl-subject {
  grid-area: subject;
}
.dl-frame {
  grid-area: frame;
}
.popover_content__dl > div > dt {
  display: none;
}
.popover_content__dl > div > dd {
  margin: 0;
}

.popover__wrapper {
  position: relative;
  display: inline-block;
}
.popover__content {
  all: initial;
  position: absolute;
  transform: translateY(8px);
  left: 0;
  top: 100%;
  z-index: 1;
  background-color: #FFFFFF;
  padding: 0.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  width: auto;
  white-space: nowrap;
  border-radius: 5px;
}
.popover__content:before {
  position: absolute;
  z-index: 1;
  content: "";
  left: 10px;
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #FFFFFF transparent;
}

.popover__title {
  cursor: pointer;
}

.colorbox {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: solid 1px #000000;
  vertical-align: unset;
  background-color: var(--colorbox-color);
}
</style>
