import CONSTANTS from "../constants/constants";

import {
  $,
  Fragment,
  component$,
  h,
  useStore,
  useStylesScoped$,
} from "@builder.io/qwik";

// 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 const getDayRight = ({ right, tooltipPosition }) => {
  return (
    "calc(" +
    right +
    " + " +
    (tooltipPosition === "left"
      ? "-178px"
      : tooltipPosition === "center"
      ? "-96px"
      : "-7px") +
    ")"
  );
};
export 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}`;
};
export const updateShowTooltip = function updateShowTooltip(
  props,
  state,
  action,
  event
) {
  if (event.clientX < 132) {
    state.tooltipPosition = "left";
  } else if (window.innerWidth - event.clientX < 132) {
    state.tooltipPosition = "right";
  } else {
    state.tooltipPosition = "center";
  }
  state._showTooltip = action === "enter";
};
export const Day = component$((props: DayProps) => {
  useStylesScoped$(STYLES);

  const state = useStore<any>({
    _showTooltip: false,
    tooltipPosition: "center",
  });

  return (
    <Fragment>
      <div
        class="div-Day"
        data-dt={JSON.stringify(props.dt)}
        onClick$={$((event) => props.clickHandler(props.dt))}
        onMouseEnter$={$((event) =>
          updateShowTooltip(props, state, "enter", event)
        )}
        onMouseLeave$={$((event) =>
          updateShowTooltip(props, state, "leave", event)
        )}
        style={{
          backgroundColor: props.color,
          top: props.top,
          right: props.right,
        }}
      ></div>
      {props.showTooltip && state._showTooltip ? (
        <div
          class="div-Day-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: state.tooltipPosition,
            }),
          }}
        >
          {getTooltipText({
            tooltipText: props.tooltipText,
            activities: props.activities,
            year: props.year,
            month: props.month,
            day: props.day,
            CONSTANTS,
          })}
        </div>
      ) : null}
    </Fragment>
  );
});

export default Day;

export const STYLES = `
.div-Day {
  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-Day-2 {
  z-index: 15;
  position: absolute;
  width: 178px;
  padding: 6px 8px;
  text-align: center;
  border-radius: 6px;
}
`;