/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { Command } from "cmdk";
import { observer } from "mobx-react";
import { EIconSize } from "@pi-dash/constants";
// pi dash imports
import { CheckIcon, StateGroupIcon } from "@pi-dash/propel/icons";
import { Spinner } from "@pi-dash/ui";
// store hooks
import { useProjectState } from "@/hooks/store/use-project-state";

export type TChangeWorkItemStateListProps = {
  projectId: string | null;
  currentStateId: string | null;
  handleStateChange: (stateId: string) => void;
};

export const ChangeWorkItemStateList = observer(function ChangeWorkItemStateList(props: TChangeWorkItemStateListProps) {
  const { projectId, currentStateId, handleStateChange } = props;
  // store hooks
  const { getProjectStates } = useProjectState();
  // derived values
  const projectStates = getProjectStates(projectId);

  return (
    <>
      {projectStates ? (
        projectStates.length > 0 ? (
          projectStates.map((state) => (
            <Command.Item key={state.id} onSelect={() => handleStateChange(state.id)} className="focus:outline-none">
              <div className="flex items-center space-x-3">
                <StateGroupIcon
                  stateGroup={state.group}
                  color={state.color}
                  size={EIconSize.LG}
                  percentage={state?.order}
                />
                <p>{state.name}</p>
              </div>
              <div>{state.id === currentStateId && <CheckIcon className="h-3 w-3" />}</div>
            </Command.Item>
          ))
        ) : (
          <div className="text-center">No states found</div>
        )
      ) : (
        <Spinner />
      )}
    </>
  );
});
