import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useCallback } from "react";
// hooks
import { useCycle } from "@/hooks/store/use-cycle";
import { useUserPermissions } from "@/hooks/store/user";
import { EUserPermissions, EUserPermissionsLevel } from "@buzzwaretech/constants";
// components
import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";

export const CycleSpreadsheetLayout = observer(
  function CycleSpreadsheetLayout() {
    // router
    const { cycleId } = useParams();
    // store hooks
    const { currentProjectCompletedCycleIds } = useCycle();
    const { allowPermissions } = useUserPermissions();
    // auth
    const isCompletedCycle =
      cycleId && currentProjectCompletedCycleIds
        ? currentProjectCompletedCycleIds.includes(cycleId.toString())
        : false;
    const isEditingAllowed = allowPermissions(
      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
      EUserPermissionsLevel.PROJECT,
    );

    const canEditIssueProperties = useCallback(
      () => !isCompletedCycle && isEditingAllowed,
      [isCompletedCycle, isEditingAllowed],
    );

    if (!cycleId) return null;

    return (
      <BaseSpreadsheetRoot
        QuickActions={CycleIssueQuickActions}
        canEditPropertiesBasedOnProject={canEditIssueProperties}
        isCompletedCycle={isCompletedCycle}
        viewId={cycleId.toString()}
      />
    );
  },
);