<template>
  <div
    class="div"
    :data-dt="JSON.stringify(dt)"
    @click="clickHandler(dt)"
    @mouseenter="updateShowTooltip('enter', $event)"
    @mouseleave="updateShowTooltip('leave', $event)"
    :style="{
      backgroundColor: color,
      top: top,
      right: right,
    }"
  ></div>

  <template v-if="showTooltip && _showTooltip">
    <div
      class="div-2"
      :style="{
        backgroundColor: tooltipBgColor ?? 'rgba(0, 0, 0, 0.8)',
        color: tooltipTextColor ?? '#e4e8ec',
        bottom: 'calc(98px + -' + top + ' + 4px)',
        right: getDayRight({
          right: right,
          tooltipPosition: tooltipPosition,
        }),
      }"
    >
      {{
        getTooltipText({
          tooltipText: tooltipText,
          activities: activities,
          year: year,
          month: month,
          day: day,
          CONSTANTS,
        })
      }}
    </div>
  </template>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import CONSTANTS from "../constants/constants";
const getDayRight = ({ right, tooltipPosition }) => {
  return (
    "calc(" +
    right +
    " + " +
    (tooltipPosition === "left"
      ? "-178px"
      : tooltipPosition === "center"
      ? "-96px"
      : "-7px") +
    ")"
  );
};
const getTooltipText = ({
  tooltipText,
  activities,
  year,
  month,
  day,
  CONSTANTS,
}) => {
  if (!!tooltipText) {
    return tooltipText
      .replaceAll("{{numOfActivities}}", activities?.length)
      .replaceAll("{{year}}", year)
      .replaceAll("{{month}}", month)
      .replaceAll("{{day}}", day);
  }
  return `${activities?.length} activities on ${CONSTANTS.MONTH_MAP[month]} ${day}, ${year}`;
};

// constants

// types
// import { DateTime } from '../types/DateTime';
type DateTime = {
  id: string;
  year: number;
  month: number;
  day: number;
  dayOfWeek: number;
  dayDiffFromToday: number;
  activities: any;
  level: number;
};
// constants

// types
// import { DateTime } from '../types/DateTime';

type DayProps = {
  clickHandler: Function;
  dt: DateTime;
  color: string;
  top: string;
  right: string;
  // tooltipText style
  showTooltip: boolean;
  tooltipBgColor?: string;
  tooltipTextColor?: string;
  tooltipText?: string;
  // tooltipText content
  activities: any[];
  year: number;
  month: number;
  day: number;
};

export default defineComponent({
  name: "day",

  props: [
    "dt",
    "clickHandler",
    "color",
    "top",
    "right",
    "showTooltip",
    "tooltipBgColor",
    "tooltipTextColor",
    "tooltipText",
    "activities",
    "year",
    "month",
    "day",
  ],

  data() {
    return { _showTooltip: false, tooltipPosition: "center", CONSTANTS };
  },

  methods: {
    updateShowTooltip(action, event) {
      if (event.clientX < 132) {
        this.tooltipPosition = "left";
      } else if (window.innerWidth - event.clientX < 132) {
        this.tooltipPosition = "right";
      } else {
        this.tooltipPosition = "center";
      }
      this._showTooltip = action === "enter";
    },
    getDayRight,
    getTooltipText,
  },
});
</script>

<style scoped>
.div {
  z-index: 10;
  position: absolute;
  width: 10px;
  height: 10px;
  outline: 1px solid rgba(27, 31, 35, 0.06);
  outline-offset: -1px;
  border-radius: 2px;
}
.div-2 {
  z-index: 15;
  position: absolute;
  width: 178px;
  padding: 6px 8px;
  text-align: center;
  border-radius: 6px;
}
</style>