import { useRef } from "react";
import { Rect } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";
import { getKonvaGradientProps } from "../../utils/gradient";
import { getColorWithOpacity } from "../../utils/colorOpacity";
import { useShapeBlurCache } from "../../utils/shapeBlur";

const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
  const shapeRef = useRef<Konva.Rect>(null);

  // Transformer is managed in EditorCanvas for multi-select support

  const isMask = obj.isMask || false;
  const showGuide = obj.showMaskGuide !== false;

  const actualStrokeWidth = obj.strokeWidth ?? 0;
  const hasStroke = actualStrokeWidth > 0;
  const cornerRadius = Math.max(0, obj.borderRadius ?? 0);
  const blurRadius = obj.blur ?? 0;
  const blurHitFill = blurRadius > 0 ? getColorWithOpacity(obj.fill ?? "#000000", 0.5) : undefined;
  // Editor blur is implemented via backdrop-filter (see BlurBackdropLayer),
  // so we intentionally do not apply Konva blur filters here.
  const blurProps = {};

  useShapeBlurCache(shapeRef, 0, [
    obj.width,
    obj.height,
    cornerRadius,
    obj.fill,
    obj.fillType,
    obj.gradient,
    obj.stroke,
    actualStrokeWidth,
  ]);
  
  // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
  const displayStroke = isSelected
    ? (hasStroke ? obj.stroke : "#3b82f6")
    : (isMask && showGuide)
      ? "#ff6b6b"
      : (isMask && !showGuide)
        ? "transparent"
        : (hasStroke ? obj.stroke : undefined);
  
  const displayStrokeWidth = isSelected
    ? (hasStroke ? actualStrokeWidth : 3)
    : (isMask && showGuide ? 2 : actualStrokeWidth);
  const gradientProps = isMask || blurRadius > 0
    ? {}
    : getKonvaGradientProps(
      obj.fillType,
      obj.gradient,
      obj.width || 100,
      obj.height || 100,
      "rect",
    );

  return (
    <Rect
      ref={shapeRef}
      id={obj.id}
      name={isMask ? "mask-shape" : "canvas-object"}
      x={obj.x}
      y={obj.y}
      width={obj.width || 100}
      height={obj.height || 100}
      cornerRadius={cornerRadius}
      // When blur is enabled, visual tint is rendered by BlurBackdropLayer.
      // Use a tiny non-zero alpha so Konva hit-detection still works for dragging.
      fill={isMask ? "transparent" : blurRadius > 0 ? blurHitFill : (obj.fill ?? "#000000")}
      {...gradientProps}
      stroke={displayStroke}
      strokeWidth={displayStrokeWidth}
      dash={isMask && showGuide ? [10, 5] : undefined}
      rotation={obj.rotation || 0}
      opacity={(obj.opacity ?? 100) / 100}
      {...blurProps}
      draggable={draggable}
      onClick={(e) => {
        if (shapeRef.current) {
          onSelect(obj.id, shapeRef.current, e);
        }
      }}
      onDragMove={(e) => {
        // Snapping is applied at Stage level, avoid store updates per frame.
        e.target.getLayer()?.batchDraw();
      }}
      onDragEnd={(e) => {
        const node = e.target;
        onUpdate(obj.id, {
          x: node.x(),
          y: node.y(),
        });
      }}
    />
  );
};

export default RectangleShape;