edr-platform/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineOrderControls.tsx

import { ActionIcon, Group, Tooltip } from "@mantine/core";
import { ChevronDown, ChevronUp } from "lucide-react";

import type { RuleEngineOrderConfig } from "@/pages/ruleEngine/config/resources";
import type { RuleEngineRecord } from "@/types/rule-engine";

import { getOrderValue } from "./ruleEngineOrder.utils";

export interface RuleEngineOrderControlsProps {
  record: RuleEngineRecord;
  orderConfig: RuleEngineOrderConfig;
  totalCount: number;
  disabled?: boolean;
  onMove: (id: string, direction: "up" | "down") => void;
}

const RuleEngineOrderControls = ({
  record,
  orderConfig,
  totalCount,
  disabled = false,
  onMove,
}: RuleEngineOrderControlsProps) => {
  const id = String(record.id);
  const order = getOrderValue(record, orderConfig.field);

  const canMoveUp = order > 1;
  const canMoveDown = orderConfig.scopeField ? true : order < totalCount;

  return (
    <Group gap={4} wrap="nowrap">
      <Tooltip label="Move up">
        <ActionIcon
          variant="subtle"
          color="gray"
          size="sm"
          disabled={disabled || !canMoveUp}
          onClick={() => onMove(id, "up")}
          aria-label="Move up"
        >
          <ChevronUp size={16} />
        </ActionIcon>
      </Tooltip>
      <Tooltip label="Move down">
        <ActionIcon
          variant="subtle"
          color="gray"
          size="sm"
          disabled={disabled || !canMoveDown}
          onClick={() => onMove(id, "down")}
          aria-label="Move down"
        >
          <ChevronDown size={16} />
        </ActionIcon>
      </Tooltip>
    </Group>
  );
};

export default RuleEngineOrderControls;