import { useContext, useMemo } from "react";
import dynamic from "next/dynamic";

import { ShowDateContext } from "../../utils/contexts/calendar";

import MonthlyView from "./monthly-view";

import Container from "components/services/widget/container";

export default function Component({ service }) {
  const { widget } = service;
  const { showDate } = useContext(ShowDateContext);

  // params for API fetch
  const params = useMemo(() => {
    if (!showDate) {
      return {};
    }

    return {
      start: showDate.minus({months: 3}).toFormat("yyyy-MM-dd"),
      end: showDate.plus({months: 3}).toFormat("yyyy-MM-dd"),
      unmonitored: 'false',
    };
  }, [showDate]);

  // Load active integrations
  const integrations = useMemo(() => widget.integrations?.map(integration => ({
    service: dynamic(() => import(`./integrations/${integration?.type}`)),
    widget: integration,
  })) ?? [], [widget.integrations]);

  return <Container service={service}>
    <div className="flex flex-col w-full">
      <div className="sticky top-0">
        {integrations.map(integration => {
          const Integration = integration.service;
          const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;

          return <Integration key={key} config={integration.widget} params={params}
                              className="fixed bottom-0 left-0 bg-red-500 w-screen h-12" />
        })}
      </div>
      <MonthlyView service={service} className="flex"/>
    </div>
  </Container>;
}