tsms/src/components/TimesheetTable/TaskGroupSelect.tsx

import React, { useCallback } from "react";
import { MenuItem, 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) => void;
  error?: boolean;
}

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={{
        slotProps: {
          paper: {
            sx: { maxHeight: 400 },
          },
        },
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "left",
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "left",
        },
      }}
    >
      {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>
  );
};

export default TaskGroupSelect;