tsms/src/components/TimesheetTable/TaskGroupSelect.tsx

import React, { useCallback } from "react";
import { MenuItem, MenuProps, Select, SelectChangeEvent } from "@mui/material";
import { useTranslation } from "react-i18next";
import { TaskGroup } from "@/app/api/tasks";

interface Props {
  taskGroupsByProject: {
    [projectId: number]: {
      value: TaskGroup["id"];
      label: string;
    }[];
  };
  projectId: number | undefined;
  value: number | undefined;
  onTaskGroupSelect: (taskGroupId: number | string) => Promise<void> | void;
  error?: boolean;
}

const menuProps: Partial<MenuProps> = {
  slotProps: {
    paper: {
      sx: { maxHeight: 400 },
    },
  },
  anchorOrigin: {
    vertical: "bottom",
    horizontal: "left",
  },
  transformOrigin: {
    vertical: "top",
    horizontal: "left",
  },
};

const TaskGroupSelect: React.FC<Props> = ({
  value,
  projectId,
  onTaskGroupSelect,
  taskGroupsByProject,
  error,
}) => {
  const { t } = useTranslation("home");

  const taskGroups = projectId ? taskGroupsByProject[projectId] : [];

  const onChange = useCallback(
    (event: SelectChangeEvent<number>) => {
      const newValue = event.target.value;
      onTaskGroupSelect(newValue);
    },
    [onTaskGroupSelect],
  );

  return (
    <Select
      error={error}
      displayEmpty
      disabled={taskGroups.length === 0}
      value={value || ""}
      onChange={onChange}
      sx={{ width: "100%" }}
      MenuProps={menuProps}
    >
      {taskGroups.length === 0 && <MenuItem value={""}>{t("None")}</MenuItem>}
      {taskGroups.map((taskGroup) => (
        <MenuItem
          key={taskGroup.value}
          value={taskGroup.value}
          sx={{ whiteSpace: "wrap" }}
        >
          {taskGroup.label}
        </MenuItem>
      ))}
    </Select>
  );
};

type TaskGroupSelectWithoutProjectProps = Pick<
  Props,
  "value" | "onTaskGroupSelect" | "error"
> & { taskGroups: TaskGroup[] };

export const TaskGroupSelectWithoutProject: React.FC<
  TaskGroupSelectWithoutProjectProps
> = ({ value, onTaskGroupSelect, error, taskGroups }) => {
  const { t } = useTranslation("home");

  const onChange = useCallback(
    (event: SelectChangeEvent<number>) => {
      const newValue = event.target.value;
      onTaskGroupSelect(newValue);
    },
    [onTaskGroupSelect],
  );

  return (
    <Select
      error={error}
      displayEmpty
      disabled={taskGroups.length === 0}
      value={value || ""}
      onChange={onChange}
      sx={{ width: "100%" }}
      MenuProps={menuProps}
    >
      {<MenuItem value={""}>{t("None")}</MenuItem>}
      {taskGroups.map((taskGroup) => (
        <MenuItem
          key={taskGroup.id}
          value={taskGroup.id}
          sx={{ whiteSpace: "wrap" }}
        >
          {taskGroup.name}
        </MenuItem>
      ))}
    </Select>
  );
};

export default TaskGroupSelect;