import Input from "@/components/Input";
import ColorPicker from "@/components/ColorPicker";
import type { EditorObject } from "@/pages/editor/store/editorStore";

type ShapeSettingsProps = {
    selectedObject: EditorObject;
    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
};

const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
    const baseWidth = selectedObject.width ?? 100;
    const baseHeight = selectedObject.height ?? 100;
    const baseFill = selectedObject.fill ?? "#3b82f6";
    const baseStroke = selectedObject.stroke ?? "#1e40af";
    const baseStrokeWidth = selectedObject.strokeWidth ?? 0;
    const baseBorderRadius = selectedObject.borderRadius ?? 0;
    const isSquareShape =
        selectedObject.shapeType === "square" || selectedObject.shapeType === undefined;

    return (
        <div className="space-y-4">
            <Input
                label="عرض"
                type="number"
                value={baseWidth}
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        width: parseInt(e.target.value) || baseWidth,
                    })
                }
            />
            <Input
                label="ارتفاع"
                type="number"
                value={baseHeight}
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        height: parseInt(e.target.value) || baseHeight,
                    })
                }
            />
            <ColorPicker
                label="رنگ پس‌زمینه"
                value={baseFill}
                onChange={(value) =>
                    onUpdate(selectedObject.id, {
                        fill: value,
                    })
                }
            />
            <ColorPicker
                label="رنگ خط"
                value={baseStroke}
                onChange={(value) =>
                    onUpdate(selectedObject.id, {
                        stroke: value,
                    })
                }
            />
            <Input
                label="ضخامت خط"
                type="number"
                value={baseStrokeWidth}
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        strokeWidth: parseInt(e.target.value) || 0,
                    })
                }
                min={0}
            />
            {isSquareShape && (
                <Input
                    label="گردی گوشه"
                    type="number"
                    value={baseBorderRadius}
                    onChange={(e) =>
                        onUpdate(selectedObject.id, {
                            borderRadius: Math.max(0, parseInt(e.target.value) || 0),
                        })
                    }
                    min={0}
                />
            )}
        </div>
    );
};

export default ShapeSettings;