import { createElement, lazy } from "react";
import type {
  CalendarPickerUiCapability,
  DashboardWidgetsUiCapability,
  PlatformWebModule,
  SettingsSectionsUiCapability
} from "@govoplan/core-webui";
import "./styles/calendar.css";
import { generatedTranslations } from "./i18n/generatedTranslations";
import CalendarPicker from "./features/calendar/CalendarPicker";
import UpcomingEventsWidget from "./features/calendar/UpcomingEventsWidget";

const CalendarPage = lazy(() => import("./features/calendar/CalendarPage"));
const CalendarSettingsPanel = lazy(
  () => import("./features/calendar/CalendarSettingsPanel")
);

const eventRead = ["calendar:event:read"];
const translations = {
  en: generatedTranslations.en,
  de: generatedTranslations.de
};

const calendarPicker: CalendarPickerUiCapability = { CalendarPicker };
const calendarSettingsSections: SettingsSectionsUiCapability = {
  sections: [
    {
      id: "calendar",
      surfaceId: "calendar.settings.preferences",
      label: "Calendar",
      group: "ui",
      order: 45,
      anyOf: eventRead,
      render: ({ settings, auth }) =>
        createElement(CalendarSettingsPanel, { settings, auth })
    }
  ]
};
const calendarDashboardWidgets: DashboardWidgetsUiCapability = {
  widgets: [
    {
      id: "calendar.upcoming",
      surfaceId: "calendar.widget.upcoming",
      title: "Upcoming events",
      description: "The next events across visible calendars.",
      moduleId: "calendar",
      category: "Planning",
      order: 40,
      defaultVisible: false,
      defaultSize: "medium",
      supportedSizes: ["medium", "wide"],
      anyOf: eventRead,
      refreshIntervalMs: 60_000,
      defaultConfiguration: {
        maxItems: 5,
        daysAhead: 14,
        showLocation: true
      },
      configurationFields: [
        {
          id: "maxItems",
          label: "Maximum events",
          kind: "number",
          min: 1,
          max: 12,
          step: 1,
          required: true
        },
        {
          id: "daysAhead",
          label: "Days ahead",
          kind: "number",
          min: 1,
          max: 90,
          step: 1,
          required: true
        },
        {
          id: "showLocation",
          label: "Show locations",
          kind: "boolean"
        }
      ],
      render: ({ settings, refreshKey, configuration }) =>
        createElement(UpcomingEventsWidget, {
          settings,
          refreshKey,
          configuration
        })
    }
  ]
};

export const calendarModule: PlatformWebModule = {
  id: "calendar",
  label: "i18n:govoplan-calendar.calendar.adab5090",
  version: "1.0.0",
  dependencies: ["access"],
  optionalDependencies: ["mail", "tasks", "scheduling", "appointments", "workflow", "notifications", "dms", "connectors"],
  translations,
  viewSurfaces: [
    {
      id: "calendar.widget.upcoming",
      moduleId: "calendar",
      kind: "section",
      label: "Upcoming events widget",
      order: 40
    },
    {
      id: "calendar.settings.preferences",
      moduleId: "calendar",
      kind: "section",
      label: "Calendar preferences",
      order: 45
    }
  ],
  navItems: [{ to: "/calendar", label: "i18n:govoplan-calendar.calendar.adab5090", iconName: "calendar", anyOf: eventRead, order: 55 }],
  routes: [
  { path: "/calendar", anyOf: eventRead, order: 55, render: ({ settings, auth }) => createElement(CalendarPage, { settings, auth }) }],
  uiCapabilities: {
    "calendar.picker": calendarPicker,
    "dashboard.widgets": calendarDashboardWidgets,
    "settings.sections": calendarSettingsSections
  }

};

export default calendarModule;