'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

import type { AssignmentRangePoint } from './assignmentRange';

interface AssignmentRangeActionsProps {
  point: AssignmentRangePoint;
  startPoint: AssignmentRangePoint | null;
  endPoint: AssignmentRangePoint | null;
  onSetStart: (point: AssignmentRangePoint) => void;
  onSetEnd: (point: AssignmentRangePoint) => void;
  stretch?: boolean;
  className?: string;
}

export function AssignmentRangeActions({
  point,
  startPoint,
  endPoint,
  onSetStart,
  onSetEnd,
  stretch = false,
  className,
}: AssignmentRangeActionsProps) {
  const isStart = point.detectionId === startPoint?.detectionId;
  const isEnd = point.detectionId === endPoint?.detectionId;

  return (
    <div className={cn('flex items-center gap-1', className)}>
      <Button
        type="button"
        size="xs"
        variant={isStart ? 'secondary' : 'outline'}
        className={cn(stretch && 'flex-1')}
        disabled={isStart}
        aria-pressed={isStart}
        title={isStart ? 'Selected as start' : 'Set as start'}
        onClick={() => onSetStart(point)}
      >
        Start
      </Button>
      <Button
        type="button"
        size="xs"
        variant={isEnd ? 'secondary' : 'outline'}
        className={cn(stretch && 'flex-1')}
        disabled={startPoint === null || isStart || isEnd}
        aria-pressed={isEnd}
        title={
          startPoint === null
            ? 'Select a start issue first'
            : isStart
              ? 'Choose another issue for the end'
              : isEnd
                ? 'Selected as end'
                : 'Set as end'
        }
        onClick={() => onSetEnd(point)}
      >
        End
      </Button>
    </div>
  );
}