import Konva from "konva";
import type { EditorObject } from "../../store/editorStore";
import {
    RectangleShape,
    CircleShape,
    TriangleShape,
    AbstractShape,
    TextShape,
    LineShape,
    ArrowShape,
    ImageObject,
    LinkShape,
    VideoShape,
} from "../tools";
import Table from "@/components/Table";

type ObjectRendererProps = {
    obj: EditorObject;
    isSelected: boolean;
    transformerRef: React.RefObject<Konva.Transformer | null>;
    layerRef: React.RefObject<Konva.Layer | null>;
    onSelect: (id: string, node: Konva.Node) => void;
    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
    draggable: boolean;
    onCellClick?: (tableId: string, cellId: string) => void;
    onCellDblClick?: (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => void;
    selectedCellId?: string | null;
};

const ObjectRenderer = ({
    obj,
    isSelected,
    transformerRef,
    layerRef,
    onSelect,
    onUpdate,
    draggable,
    onCellClick,
    onCellDblClick,
    selectedCellId,
}: ObjectRendererProps) => {
    if (obj.visible === false) {
        return null;
    }

    const commonProps = {
        obj,
        isSelected,
        transformerRef,
        onSelect,
        onUpdate,
        draggable,
    };

    switch (obj.type) {
        case "rectangle":
            if (obj.shapeType === "circle") {
                return <CircleShape key={obj.id} {...commonProps} />;
            }
            if (obj.shapeType === "triangle") {
                return <TriangleShape key={obj.id} {...commonProps} />;
            }
            if (obj.shapeType === "abstract") {
                return <AbstractShape key={obj.id} {...commonProps} />;
            }
            return <RectangleShape key={obj.id} {...commonProps} />;
        case "text":
            return <TextShape key={obj.id} {...commonProps} layerRef={layerRef} />;
        case "line":
            return <LineShape key={obj.id} {...commonProps} />;
        case "arrow":
            return <ArrowShape key={obj.id} {...commonProps} />;
        case "image":
            return <ImageObject key={obj.id} {...commonProps} />;
        case "link":
            return <LinkShape key={obj.id} {...commonProps} />;
        case "video":
            return <VideoShape key={obj.id} {...commonProps} />;
        case "document":
            return <ImageObject key={obj.id} {...commonProps} />;
        case "grid":
            return (
                <Table
                    key={obj.id}
                    obj={obj}
                    selectedCellId={selectedCellId || null}
                    onCellClick={(tableId, cellId, node) => {
                        onSelect(tableId, node);
                        onCellClick?.(tableId, cellId);
                    }}
                    onCellDblClick={(tableId, cellId, x, y, width, height, text) => {
                        onCellDblClick?.(tableId, cellId, x, y, width, height, text);
                    }}
                    onDragEnd={(tableId, x, y) => {
                        onUpdate(tableId, { x, y });
                    }}
                    draggable={draggable}
                />
            );
        default:
            return null;
    }
};

export default ObjectRenderer;