import { Group, Rect, Text } from "react-konva";
import type { EditorObject } from "../../store/editorStore";

interface GroupMaskButtonsProps {
  selectedObject: EditorObject;
  maskObject: EditorObject | null;
  canGroup: boolean;
  canUngroup: boolean;
  onGroup: (objectId: string, maskId: string) => void;
  onUngroup: (groupId: string) => void;
}

const GroupMaskButtons = ({
  selectedObject,
  maskObject,
  canGroup,
  canUngroup,
  onGroup,
  onUngroup,
}: GroupMaskButtonsProps) => {
  if (!canGroup && !canUngroup) return null;

  const buttonX = (selectedObject.x || 0) + ((selectedObject.width || 100) / 2) - 50;
  const buttonY = (selectedObject.y || 0) - 40;

  return (
    <>
      {/* دکمه گروه‌بندی */}
      {canGroup && maskObject && (
        <Group>
          <Rect
            x={buttonX}
            y={buttonY}
            width={100}
            height={32}
            fill="#3b82f6"
            cornerRadius={8}
            shadowColor="black"
            shadowBlur={10}
            shadowOpacity={0.2}
            onClick={() => onGroup(selectedObject.id, maskObject.id)}
            onTap={() => onGroup(selectedObject.id, maskObject.id)}
            listening={true}
          />
          <Text
            x={buttonX}
            y={buttonY}
            width={100}
            height={32}
            text="گروه‌بندی با ماسک"
            fontSize={13}
            fontFamily="irancell"
            fill="white"
            align="center"
            verticalAlign="middle"
            onClick={() => onGroup(selectedObject.id, maskObject.id)}
            onTap={() => onGroup(selectedObject.id, maskObject.id)}
            listening={true}
          />
        </Group>
      )}

      {/* دکمه لغو گروه‌بندی */}
      {canUngroup && (
        <Group>
          <Rect
            x={buttonX}
            y={buttonY}
            width={100}
            height={32}
            fill="#ef4444"
            cornerRadius={8}
            shadowColor="black"
            shadowBlur={10}
            shadowOpacity={0.2}
            onClick={() => onUngroup(selectedObject.id)}
            onTap={() => onUngroup(selectedObject.id)}
            listening={true}
          />
          <Text
            x={buttonX}
            y={buttonY}
            width={100}
            height={32}
            text="لغو گروه‌بندی"
            fontSize={13}
            fontFamily="irancell"
            fill="white"
            align="center"
            verticalAlign="middle"
            onClick={() => onUngroup(selectedObject.id)}
            onTap={() => onUngroup(selectedObject.id)}
            listening={true}
          />
        </Group>
      )}
    </>
  );
};

export default GroupMaskButtons;

