<script context="module" lang="ts">
  // 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;
  };
</script>

<script lang="ts">
  import Days from "./Days/Days.svelte";

  export let mode: ActivityCalendarWidgetProps["mode"] = undefined;
  export let data: ActivityCalendarWidgetProps["data"];
  export let daysToRender: ActivityCalendarWidgetProps["daysToRender"] =
    undefined;
  export let showSummary: ActivityCalendarWidgetProps["showSummary"] =
    undefined;
  export let summaryText: ActivityCalendarWidgetProps["summaryText"] =
    undefined;
  export let showLevels: ActivityCalendarWidgetProps["showLevels"] = undefined;
  export let levelColorMode: ActivityCalendarWidgetProps["levelColorMode"] =
    undefined;
  export let levelColors: ActivityCalendarWidgetProps["levelColors"] =
    undefined;
  export let levelLabelLess: ActivityCalendarWidgetProps["levelLabelLess"] =
    undefined;
  export let levelLabelMore: ActivityCalendarWidgetProps["levelLabelMore"] =
    undefined;
  export let showTooltip: ActivityCalendarWidgetProps["showTooltip"] =
    undefined;
  export let tooltipBgColor: ActivityCalendarWidgetProps["tooltipBgColor"] =
    undefined;
  export let tooltipTextColor: ActivityCalendarWidgetProps["tooltipTextColor"] =
    undefined;
  export let tooltipText: ActivityCalendarWidgetProps["tooltipText"] =
    undefined;
  export let weekStart: ActivityCalendarWidgetProps["weekStart"] = undefined;
  export let showWeekdayLabels: ActivityCalendarWidgetProps["showWeekdayLabels"] =
    undefined;
  export let weekdayLabel: ActivityCalendarWidgetProps["weekdayLabel"] =
    undefined;
  export let showMonthLabels: ActivityCalendarWidgetProps["showMonthLabels"] =
    undefined;
  export let monthLabel: ActivityCalendarWidgetProps["monthLabel"] = undefined;
  export let clickHandler: ActivityCalendarWidgetProps["clickHandler"] =
    undefined;
</script>

<div>
  {#if !mode || mode === "day"}
    <Days
      {data}
      {daysToRender}
      {showSummary}
      {summaryText}
      {showLevels}
      {levelColorMode}
      {levelColors}
      {levelLabelLess}
      {levelLabelMore}
      {showTooltip}
      {tooltipBgColor}
      {tooltipTextColor}
      {tooltipText}
      {weekStart}
      {showWeekdayLabels}
      {weekdayLabel}
      {showMonthLabels}
      {monthLabel}
      clickHandler={clickHandler ?? (() => {})}
    />
  {/if}
</div>