<template>
  <div>
    <template v-if="!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>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import Days from "./Days/Days.vue";

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

export default defineComponent({
  name: "activity-calendar-widget",
  components: { Days: Days },
  props: [
    "mode",
    "data",
    "daysToRender",
    "showSummary",
    "summaryText",
    "showLevels",
    "levelColorMode",
    "levelColors",
    "levelLabelLess",
    "levelLabelMore",
    "showTooltip",
    "tooltipBgColor",
    "tooltipTextColor",
    "tooltipText",
    "weekStart",
    "showWeekdayLabels",
    "weekdayLabel",
    "showMonthLabels",
    "monthLabel",
    "clickHandler",
  ],
});
</script>