import { observer } from "mobx-react";
// buzzwareTech types
import { EUserPermissionsLevel, WORKSPACE_SETTINGS } from "@buzzwaretech/constants";
// components
import type { TPowerKContext } from "@/components/power-k/core/types";
import { PowerKSettingsMenu } from "@/components/power-k/menus/settings";
import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
import { useTranslation } from "@buzzwaretech/i18n";
// hooks
import { useUserPermissions } from "@/hooks/store/user";

type Props = {
  context: TPowerKContext;
  handleSelect: (href: string) => void;
};

export const PowerKOpenWorkspaceSettingsMenu = observer(
  function PowerKOpenWorkspaceSettingsMenu(props: Props) {
    const { context, handleSelect } = props;
    // buzzwareTech hooks
    const { t } = useTranslation();
    // store hooks
    const { allowPermissions } = useUserPermissions();
    // derived values
    const settingsList = Object.values(WORKSPACE_SETTINGS).filter(
      (setting) =>
        context.params.workspaceSlug &&
        allowPermissions(
          setting.access,
          EUserPermissionsLevel.WORKSPACE,
          context.params.workspaceSlug?.toString(),
        ),
    );
    const settingsListWithIcons = settingsList.map((setting) => ({
      ...setting,
      label: t(setting.i18n_label),
      icon: WORKSPACE_SETTINGS_ICONS[setting.key],
    }));

    return (
      <PowerKSettingsMenu
        settings={settingsListWithIcons}
        onSelect={(setting) => handleSelect(setting.href)}
      />
    );
  },
);