"use client";
import * as React from "react";
import { useState } from "react";

// 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;
};
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}`;
};

function Day(props: DayProps) {
  const [_showTooltip, set_showTooltip] = useState(() => false);

  const [tooltipPosition, setTooltipPosition] = useState(() => "center");

  function updateShowTooltip(action, event) {
    if (event.clientX < 132) {
      setTooltipPosition("left");
    } else if (window.innerWidth - event.clientX < 132) {
      setTooltipPosition("right");
    } else {
      setTooltipPosition("center");
    }
    set_showTooltip(action === "enter");
  }

  return (
    <>
      <>
        <div
          className="div-c813f788"
          data-dt={JSON.stringify(props.dt)}
          onClick={(event) => props.clickHandler(props.dt)}
          onMouseEnter={(event) => updateShowTooltip("enter", event)}
          onMouseLeave={(event) => updateShowTooltip("leave", event)}
          style={{
            backgroundColor: props.color,
            top: props.top,
            right: props.right,
          }}
        />
        {props.showTooltip && _showTooltip ? (
          <div
            className="div-c813f788-2"
            style={{
              backgroundColor: props.tooltipBgColor ?? "rgba(0, 0, 0, 0.8)",
              color: props.tooltipTextColor ?? "#e4e8ec",
              bottom: "calc(98px + -" + props.top + " + 4px)",
              right: getDayRight({
                right: props.right,
                tooltipPosition: tooltipPosition,
              }),
            }}
          >
            {getTooltipText({
              tooltipText: props.tooltipText,
              activities: props.activities,
              year: props.year,
              month: props.month,
              day: props.day,
              CONSTANTS,
            })}
          </div>
        ) : null}
      </>

      <style>{`.div-c813f788 {
  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-c813f788-2 {
  z-index: 15;
  position: absolute;
  width: 178px;
  padding: 6px 8px;
  text-align: center;
  border-radius: 6px;
}`}</style>
    </>
  );
}

export default Day;