import { MocoAPI } from "mobility-toolbox-js/ol";
import { memo, useEffect, useMemo, useState } from "preact/compat";

import I18n from "../I18n";
import NotificationDetails from "../NotificationDetails";
import { MAX_EXTENT } from "../utils/constants";

import MobilityNotificationAttributes from "./MobilityNotificationAttributes";

// @ts-expect-error tailwind must be added for the search web component
import tailwind from "../style.css";

import type { SituationType } from "mobility-toolbox-js/types";

import type { MobilityNotificationAttributeName } from "./MobilityNotificationAttributes";

export type MobilityNotificationProps = Record<
  MobilityNotificationAttributeName,
  null | string | undefined
>;

function MobilityNotification({
  apikey,
  lang,
  notificationid,
  notificationlang,
  notificationtenant,
  notificationurl,
}: MobilityNotificationProps) {
  const [notification, setNotification] = useState<SituationType>();

  // Define fallback languages from the notificationlang attribute
  const fallbackLangs = useMemo(() => {
    return (
      notificationlang?.split(",").map((l) => {
        return l.trim();
      }) || []
    );
  }, [notificationlang]);

  useEffect(() => {
    new MocoAPI({
      apiKey: apikey || undefined,
      tenant: notificationtenant,
      url: notificationurl,
    })
      .exportById(notificationid,{
        contentMedium: true,
        includeGeoms: false,
        includeLines: true,
        includeStops: true,
      })
      .then((data) => {
        if (data) {
          setNotification(data);
        }
      })
      .catch((e) => {
        // eslint-disable-next-line no-console
        console.error(e);
      });
  }, [apikey, notificationurl, notificationtenant]);

  return (
    <I18n locale={lang}>
      <style>{tailwind}</style>
      <div className="flex w-full flex-col gap-6">
        <NotificationDetails
          fallbackLangs={fallbackLangs}
          headerClassName="text-h3 font-semibold"
          iconClassName="w-8 h-8 text-red"
          reasonClassName="hidden"
          situation={notification}
          timeIntervalClassName="pl-1 text-base py-3 font-semibold text-balance"
          useShortMonth={false}
        ></NotificationDetails>
      </div>
    </I18n>
  );
}

// We creates a wrapper to inject the default props values from MobilityNotificationAttributes.
const defaultProps = {};
Object.entries(MobilityNotificationAttributes).forEach(([key]) => {
  defaultProps[key] = MobilityNotificationAttributes[key].defaultValue || null;
});

function MobilityNotificationWithDefaultProps(
  props: MobilityNotificationProps,
) {
  return <MobilityNotification {...defaultProps} {...props} />;
}

export default memo(MobilityNotificationWithDefaultProps);