import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// BuzzwareTech
import type {
    IBlockUpdateData,
    IBlockUpdateDependencyData,
    IModule,
} from "@buzzwaretech/types";
import { GANTT_TIMELINE_TYPE } from "@buzzwaretech/types";
// components
import { GanttChartRoot, ModuleGanttSidebar } from "@/components/gantt-chart";
import { TimeLineTypeContext } from "@/components/gantt-chart/contexts";
import { ModuleGanttBlock } from "@/components/modules";
// hooks
import { useModule } from "@/hooks/store/use-module";
import { useModuleFilter } from "@/hooks/store/use-module-filter";
import { useProject } from "@/hooks/store/use-project";

export const ModulesListGanttChartView = observer(
  function ModulesListGanttChartView() {
    // router
    const { workspaceSlug, projectId } = useParams();
    // store
    const { currentProjectDetails } = useProject();
    const { getFilteredModuleIds, updateModuleDetails } = useModule();
    const { currentProjectDisplayFilters: displayFilters } = useModuleFilter();

    // derived values
    const filteredModuleIds = projectId
      ? getFilteredModuleIds(projectId.toString())
      : undefined;

    const handleModuleUpdate = async (
      module: IModule,
      data: IBlockUpdateData,
    ) => {
      if (!workspaceSlug || !module) return;

      const payload: any = { ...data };
      if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;

      await updateModuleDetails(
        workspaceSlug.toString(),
        module.project_id,
        module.id,
        payload,
      );
    };

    const updateBlockDates = async (
      blockUpdates: IBlockUpdateDependencyData[],
    ) => {
      const blockUpdate = blockUpdates[0];

      if (!blockUpdate) return;

      const payload: Partial<IModule> = {};

      if (blockUpdate.start_date) payload.start_date = blockUpdate.start_date;
      if (blockUpdate.target_date)
        payload.target_date = blockUpdate.target_date;

      await updateModuleDetails(
        workspaceSlug.toString(),
        projectId.toString(),
        blockUpdate.id,
        payload,
      );
    };

    const isAllowed =
      currentProjectDetails?.member_role === 20 ||
      currentProjectDetails?.member_role === 15;

    if (!filteredModuleIds) return null;

    return (
      <TimeLineTypeContext.Provider value={GANTT_TIMELINE_TYPE.MODULE}>
        <GanttChartRoot
          title="Modules"
          loaderTitle="Modules"
          blockIds={filteredModuleIds}
          sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
          blockUpdateHandler={(block, payload) =>
            handleModuleUpdate(block, payload)
          }
          blockToRender={(data: IModule) => (
            <ModuleGanttBlock moduleId={data.id} />
          )}
          enableBlockLeftResize={isAllowed}
          enableBlockRightResize={isAllowed}
          enableBlockMove={isAllowed}
          enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
          enableAddBlock={isAllowed}
          updateBlockDates={updateBlockDates}
          showAllBlocks
        />
      </TimeLineTypeContext.Provider>
    );
  },
);