import { observer } from "mobx-react";
import { useCallback } from "react";
// buzzwareTech types
import type { ILinkDetails } from "@buzzwaretech/types";
// components
import { ModulesLinksListItem } from "@/components/modules";
// hooks
import { useModule } from "@/hooks/store/use-module";

type Props = {
  disabled?: boolean;
  handleDeleteLink: (linkId: string) => void;
  handleEditLink: (link: ILinkDetails) => void;
  moduleId: string;
};

export const ModuleLinksList = observer(function ModuleLinksList(props: Props) {
  const { moduleId, handleDeleteLink, handleEditLink, disabled } = props;
  // store hooks
  const { getModuleById } = useModule();
  // derived values
  const currentModule = getModuleById(moduleId);
  const moduleLinks = currentModule?.link_module;
  // memoized link handlers
  const memoizedDeleteLink = useCallback(
    (id: string) => handleDeleteLink(id),
    [handleDeleteLink],
  );
  const memoizedEditLink = useCallback(
    (link: ILinkDetails) => handleEditLink(link),
    [handleEditLink],
  );

  if (!moduleLinks) return null;

  return (
    <>
      {moduleLinks.map((link) => (
        <ModulesLinksListItem
          key={link.id}
          handleDeleteLink={() => memoizedDeleteLink(link.id)}
          handleEditLink={() => memoizedEditLink(link)}
          isEditingAllowed={!disabled}
          link={link}
        />
      ))}
    </>
  );
});