import { useRef } from "react";
import { RegularPolygon } 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 TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
    const shapeRef = useRef<Konva.RegularPolygon>(null);

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

    const isMask = obj.isMask || false;
    const showGuide = obj.showMaskGuide !== false;
    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);

    const actualStrokeWidth = obj.strokeWidth ?? 0;
    const hasStroke = actualStrokeWidth > 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).
    // Avoid applying Konva blur filters on the element itself.
    const blurProps = {};

    useShapeBlurCache(shapeRef, 0, [
        obj.width,
        obj.fill,
        obj.fillType,
        obj.gradient,
        obj.stroke,
        actualStrokeWidth,
        obj.height,
    ]);

    // برای نمایش انتخاب: اگر 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,
          "centered",
        );

    return (
        <RegularPolygon
            ref={shapeRef}
            id={obj.id}
            name={isMask ? "mask-shape" : "canvas-object"}
            x={obj.x + (obj.width || 100) / 2}
            y={obj.y + (obj.height || 100) / 2}
            sides={3}
            radius={radius}
            // When blur is enabled, tint is rendered by BlurBackdropLayer.
            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) => {
                e.target.getLayer()?.batchDraw();
            }}
            onDragEnd={(e) => {
                const node = e.target;
                onUpdate(obj.id, {
                    x: node.x() - (obj.width || 100) / 2,
                    y: node.y() - (obj.height || 100) / 2,
                });
            }}
        />
    );
};

export default TriangleShape;

