import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useState } from "react";
// hooks
import { useProjectState } from "@/hooks/store/use-project-state";
// local imports
import type { TWorkItemStateDropdownBaseProps } from "./base";
import { WorkItemStateDropdownBase } from "./base";

type TWorkItemStateDropdownProps = Omit<
  TWorkItemStateDropdownBaseProps,
  "stateIds" | "getStateById" | "onDropdownOpen" | "isInitializing"
> & {
  stateIds?: string[];
};

export const IntakeStateDropdown = observer(function IntakeStateDropdown(
  props: TWorkItemStateDropdownProps,
) {
  const { projectId, stateIds: propsStateIds } = props;
  // router params
  const { workspaceSlug } = useParams();
  // states
  const [stateLoader, setStateLoader] = useState(false);
  // store hooks
  const {
    fetchProjectIntakeState,
    getProjectIntakeStateIds,
    getIntakeStateById,
  } = useProjectState();
  // derived values
  const stateIds = propsStateIds ?? getProjectIntakeStateIds(projectId);

  // fetch states if not provided
  const onDropdownOpen = async () => {
    if (
      (stateIds === undefined || stateIds.length === 0) &&
      workspaceSlug &&
      projectId
    ) {
      setStateLoader(true);
      await fetchProjectIntakeState(workspaceSlug.toString(), projectId);
      setStateLoader(false);
    }
  };

  return (
    <WorkItemStateDropdownBase
      {...props}
      getStateById={getIntakeStateById}
      isInitializing={stateLoader}
      stateIds={stateIds ?? []}
      onDropdownOpen={onDropdownOpen}
    />
  );
});