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

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

// types
// import { Data } from "./types/Data";
// import { MonthLabel } from "./types/MonthLabel";
// import { WeekdayLabel } from "./types/WeekdayLabel";
type Data = {
  date: string;
  activities: any[];
};
// types
// import { Data } from "./types/Data";
// import { MonthLabel } from "./types/MonthLabel";
// import { WeekdayLabel } from "./types/WeekdayLabel";

type MonthKey = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
// types
// import { Data } from "./types/Data";
// import { MonthLabel } from "./types/MonthLabel";
// import { WeekdayLabel } from "./types/WeekdayLabel";

type MonthLabel = Record<MonthKey, string>;
// types
// import { Data } from "./types/Data";
// import { MonthLabel } from "./types/MonthLabel";
// import { WeekdayLabel } from "./types/WeekdayLabel";

type WeekdayKey = 0 | 1 | 2 | 3 | 4 | 5 | 6;
// types
// import { Data } from "./types/Data";
// import { MonthLabel } from "./types/MonthLabel";
// import { WeekdayLabel } from "./types/WeekdayLabel";

type WeekdayLabel = Record<WeekdayKey, string>;

// components
// types
// import { Data } from "./types/Data";
// import { MonthLabel } from "./types/MonthLabel";
// import { WeekdayLabel } from "./types/WeekdayLabel";

// components

type ActivityCalendarWidgetProps = {
  // General props
  data: Data[];
  daysToRender?: number;
  mode?: "day" | "week" | "month";
  // Event Handler
  clickHandler?: Function;
  // General props - summary
  showSummary?: boolean;
  summaryText?: string;
  // General props - levels
  showLevels?: boolean;
  levelColorMode?: "light" | "dark";
  levelColors?: string[];
  levelLabelLess?: string;
  levelLabelMore?: string;
  // General props - tooltip
  showTooltip?: boolean;
  tooltipBgColor?: string;
  tooltipTextColor?: string;
  tooltipText?: string;
  // 'day' specific props
  weekStart?: WeekdayKey;
  showWeekdayLabels?: boolean;
  weekdayLabel?: WeekdayLabel;
  showMonthLabels?: boolean;
  monthLabel?: MonthLabel;
};

@Component({
  selector: "activity-calendar-widget, ActivityCalendarWidget",
  template: `
    <div>
      <ng-container *ngIf="!mode || mode === 'day'">
        <days
          [data]="data"
          [daysToRender]="daysToRender"
          [showSummary]="showSummary"
          [summaryText]="summaryText"
          [showLevels]="showLevels"
          [levelColorMode]="levelColorMode"
          [levelColors]="levelColors"
          [levelLabelLess]="levelLabelLess"
          [levelLabelMore]="levelLabelMore"
          [showTooltip]="showTooltip"
          [tooltipBgColor]="tooltipBgColor"
          [tooltipTextColor]="tooltipTextColor"
          [tooltipText]="tooltipText"
          [weekStart]="weekStart"
          [showWeekdayLabels]="showWeekdayLabels"
          [weekdayLabel]="weekdayLabel"
          [showMonthLabels]="showMonthLabels"
          [monthLabel]="monthLabel"
          [clickHandler]="clickHandler ?? (() => {})"
        ></days>
      </ng-container>
    </div>
  `,
  styles: [
    `
      :host {
        display: contents;
      }
    `,
  ],
})
export default class ActivityCalendarWidget {
  @Input() mode!: ActivityCalendarWidgetProps["mode"];
  @Input() data!: ActivityCalendarWidgetProps["data"];
  @Input() daysToRender!: ActivityCalendarWidgetProps["daysToRender"];
  @Input() showSummary!: ActivityCalendarWidgetProps["showSummary"];
  @Input() summaryText!: ActivityCalendarWidgetProps["summaryText"];
  @Input() showLevels!: ActivityCalendarWidgetProps["showLevels"];
  @Input() levelColorMode!: ActivityCalendarWidgetProps["levelColorMode"];
  @Input() levelColors!: ActivityCalendarWidgetProps["levelColors"];
  @Input() levelLabelLess!: ActivityCalendarWidgetProps["levelLabelLess"];
  @Input() levelLabelMore!: ActivityCalendarWidgetProps["levelLabelMore"];
  @Input() showTooltip!: ActivityCalendarWidgetProps["showTooltip"];
  @Input() tooltipBgColor!: ActivityCalendarWidgetProps["tooltipBgColor"];
  @Input() tooltipTextColor!: ActivityCalendarWidgetProps["tooltipTextColor"];
  @Input() tooltipText!: ActivityCalendarWidgetProps["tooltipText"];
  @Input() weekStart!: ActivityCalendarWidgetProps["weekStart"];
  @Input() showWeekdayLabels!: ActivityCalendarWidgetProps["showWeekdayLabels"];
  @Input() weekdayLabel!: ActivityCalendarWidgetProps["weekdayLabel"];
  @Input() showMonthLabels!: ActivityCalendarWidgetProps["showMonthLabels"];
  @Input() monthLabel!: ActivityCalendarWidgetProps["monthLabel"];
  @Input() clickHandler!: ActivityCalendarWidgetProps["clickHandler"];
}

@NgModule({
  declarations: [ActivityCalendarWidget],
  imports: [CommonModule, DaysModule],
  exports: [ActivityCalendarWidget],
})
export class ActivityCalendarWidgetModule {}