import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { Output, EventEmitter, Component, Input } from "@angular/core";

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

@Component({
  selector: "day, Day",
  template: `
    <ng-container>
      <div
        class="div"
        [attr.data-dt]="JSON.stringify(dt)"
        (click)="this.clickHandler.emit(dt)"
        (mouseEnter)="updateShowTooltip('enter', $event)"
        (mouseLeave)="updateShowTooltip('leave', $event)"
        [ngStyle]="useObjectWrapper({ backgroundColor: color }, { top: top }, { right: right })"
      ></div>
      <ng-container *ngIf="showTooltip && _showTooltip">
        <div
          class="div-2"
          [ngStyle]="useObjectWrapper({ 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>
      </ng-container>
    </ng-container>
  `,
  styles: [
    `
      :host {
        display: contents;
      }
      .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;
      }
    `,
  ],
})
export default class Day {
  getDayRight = getDayRight;
  getTooltipText = getTooltipText;
  CONSTANTS = CONSTANTS;

  @Input() dt!: DayProps["dt"];
  @Input() color!: DayProps["color"];
  @Input() top!: DayProps["top"];
  @Input() right!: DayProps["right"];
  @Input() showTooltip!: DayProps["showTooltip"];
  @Input() tooltipBgColor!: DayProps["tooltipBgColor"];
  @Input() tooltipTextColor!: DayProps["tooltipTextColor"];
  @Input() tooltipText!: DayProps["tooltipText"];
  @Input() activities!: DayProps["activities"];
  @Input() year!: DayProps["year"];
  @Input() month!: DayProps["month"];
  @Input() day!: DayProps["day"];

  @Output() clickHandler = new EventEmitter();

  _showTooltip = false;
  tooltipPosition = "center";
  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";
  }

  useObjectWrapper(...args: any[]) {
    let obj = {};
    args.forEach((arg) => {
      obj = { ...obj, ...arg };
    });
    return obj;
  }
}

@NgModule({
  declarations: [Day],
  imports: [CommonModule],
  exports: [Day],
})
export class DayModule {}