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

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

const normalizeNumericInput = (value: string): string => {
    const persianDigits = "۰۱۲۳۴۵۶۷۸۹";
    const arabicDigits = "٠١٢٣٤٥٦٧٨٩";

    return value
        .replace(/[۰-۹]/g, (d) => String(persianDigits.indexOf(d)))
        .replace(/[٠-٩]/g, (d) => String(arabicDigits.indexOf(d)))
        .replace("٫", ".")
        .replace(",", ".");
};

const parseNumber = (value: string): number => Number(normalizeNumericInput(value));

const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
    const textAlign = selectedObject.textAlign ?? "right";

    const alignButtonClass = (align: "right" | "center" | "left") =>
        `rounded-md border px-3 py-1 text-xs transition-colors ${
            textAlign === align
                ? "border-blue-500 bg-blue-50 text-blue-700"
                : "border-border text-foreground hover:bg-muted"
        }`;

    return (
        <>
            <Input
                label="متن"
                value={selectedObject.text || ""}
                onChange={(e) => onUpdate(selectedObject.id, { text: e.target.value })}
            />
            <Input
                label="اندازه فونت"
                type="number"
                value={selectedObject.fontSize || 24}
                step="1"
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        fontSize: parseNumber(e.target.value) || 24,
                    })
                }
            />
            <Input
                label="فاصله خطوط"
                type="number"
                value={selectedObject.lineHeight ?? 1.2}
                step="0.1"
                min="0.5"
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        lineHeight: parseNumber(e.target.value) || 1.2,
                    })
                }
            />
            <Input
                label="حداکثر عرض متن"
                type="number"
                value={selectedObject.textMaxWidth ?? DEFAULT_TEXT_MAX_WIDTH_PX}
                step="1"
                min="80"
                onChange={(e) =>
                    onUpdate(selectedObject.id, {
                        textMaxWidth: Math.max(80, parseNumber(e.target.value) || DEFAULT_TEXT_MAX_WIDTH_PX),
                    })
                }
            />
            <div className="space-y-2">
                <p className="text-sm">چینش متن</p>
                <div className="grid grid-cols-3 gap-2">
                    <button
                        type="button"
                        className={alignButtonClass("right")}
                        onClick={() => onUpdate(selectedObject.id, { textAlign: "right" })}
                    >
                        راست
                    </button>
                    <button
                        type="button"
                        className={alignButtonClass("center")}
                        onClick={() => onUpdate(selectedObject.id, { textAlign: "center" })}
                    >
                        وسط
                    </button>
                    <button
                        type="button"
                        className={alignButtonClass("left")}
                        onClick={() => onUpdate(selectedObject.id, { textAlign: "left" })}
                    >
                        چپ
                    </button>
                </div>
            </div>
            <ColorPicker
                label="رنگ متن"
                value={selectedObject.fill || "#000000"}
                onChange={(value) => onUpdate(selectedObject.id, { fill: value })}
            />
        </>
    );
};

export default TextSettings;

