import { Trash } from "iconsax-react";
import type { EditorObject } from "../../store/editorStore";
import {
    ShapeSettings,
    LineSettings,
    SizeSettings,
    LinkSettings,
    VideoSettings,
    AlignmentSettings,
    TransformSettings,
    GridSettings,
    MaskSettings,
} from "./settings";
import TextInstruction from "./instructions/TextInstruction";

type ObjectSettingsProps = {
    selectedObject: EditorObject;
    pageWidth: number;
    pageHeight: number;
    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
    onDelete: (id: string) => void;
};

const ObjectSettings = ({
    selectedObject,
    pageWidth,
    pageHeight,
    onUpdate,
    onDelete,
}: ObjectSettingsProps) => {
    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between pb-4">
                <h3 className="text-sm font-medium">تنظیمات شیء</h3>
                <button
                    onClick={() => onDelete(selectedObject.id)}
                    className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500"
                >
                    <Trash size={20} />
                </button>
            </div>

            <AlignmentSettings
                pageWidth={pageWidth}
                pageHeight={pageHeight}
                onUpdate={onUpdate}
            />

            {/* Mask Settings for all objects */}
            <MaskSettings objectId={selectedObject.id} />

            {selectedObject.type === "text" && <TextInstruction />}

            {selectedObject.type === "rectangle" && (
                <ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
            )}

            {(selectedObject.type === "line" || selectedObject.type === "arrow") && (
                <LineSettings selectedObject={selectedObject} onUpdate={onUpdate} />
            )}

            {selectedObject.type === "image" && (
                <SizeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
            )}

            {selectedObject.type === "link" && (
                <LinkSettings selectedObject={selectedObject} onUpdate={onUpdate} />
            )}

            {selectedObject.type === "video" && (
                <VideoSettings selectedObject={selectedObject} onUpdate={onUpdate} />
            )}



            {(selectedObject.type === "document" || selectedObject.type === "sticker") && (
                <SizeSettings
                    selectedObject={selectedObject}
                    onUpdate={onUpdate}
                    defaultWidth={selectedObject.type === "document" ? 200 : 100}
                    defaultHeight={selectedObject.type === "document" ? 250 : 100}
                />
            )}

            {selectedObject.type === "grid" && (
                <GridSettings selectedObject={selectedObject} onUpdate={onUpdate} />
            )}


            <TransformSettings selectedObject={selectedObject} onUpdate={onUpdate} />
        </div>
    );
};

export default ObjectSettings;