/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React, { useEffect } from "react";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import ContextMenu from "components/containers/contextmenu/ContextMenu";
import ServiceLink from "components/ServiceLink";
import ContextMenuItem from "components/containers/contextmenu/ContextMenuItem";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
import { useServicesStore } from "services/data/servicesSlice";
import { useServicesViewModel } from "services/controller/servicesViewModel";
import CircleLoader from "components/CircleLoader";
import { useUIStore } from "ui/data/uiSlice";

/* -------------------------------------------------------------------------- */
/*                       Services context menu component                      */
/* -------------------------------------------------------------------------- */

export default function ServicesNavigationContext() {
  const servicesStore = useServicesStore();
  const uiStore = useUIStore();

  const { isLoading, services } = useServicesViewModel({
    ...servicesStore,
    notify: uiStore.notify,
  });

  return (
    <ContextMenu
      button={
        <SVGServicesIcon
          className="inline-flex justify-center w-8 h-8
      px-1 py-1 rounded transition-colors 
      bg-opacity-0 bg-gray-300 hover:bg-opacity-30 
      focus:outline-none focus-visible:ring-2 
      focus-visible:ring-white focus-visible:ring-opacity-75 fill-current"
        />
      }
      className="absolute w-full min-h-14 sm:w-96  -bottom-3
      sm:top-auto sm:bottom-auto 
      mt-5 z-10 sm:transform -translate-1/2 
      origin-top-center"
    >
      {!services || isLoading ? (
        <div className="h-52 w-full flex items-center justify-center">
          <div className="w-12 h-12">
            <CircleLoader />
          </div>
        </div>
      ) : (
        <>
          {services
            .filter((service) => service.subscribed)
            .map((service) => (
              <ContextMenuItem key={service.id}>
                <ServiceLink service={service} />
              </ContextMenuItem>
            ))}
        </>
      )}
    </ContextMenu>
  );
}
