// * Packages
import { useState, useEffect } from "react";
import { usePage } from "@inertiajs/react";
// * Components shadcn
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
// * Other
import InputError from "@/back/Components/InputError";
import { cn } from "@/lib/utils";
import useTrans from "@/hooks/use-translations";

type SimpleNumberProps = {
    className?: string;
    name: string;
    label: string;
    value?: number;
    id?: string;
    step?: number;
    limits?: Record<string, number>;
    placeholder?: string;
    required?: boolean;
    disabled?: boolean;
    parentErrors?: Record<string, string> | null;
    // eslint-disable-next-line no-unused-vars
    setData: (name: string, value: string) => void;
};

export default function SimpleNumber({
    className,
    value = 0,
    name,
    label,
    id = name,
    step = 1,
    limits,
    placeholder = "back.enter_number_here",
    required = true,
    disabled = false,
    parentErrors = null,
    setData,
}: SimpleNumberProps) {
    const { errors } = usePage().props;
    const localErrors = parentErrors ?? errors;

    const localLimits = {
        min: limits?.min ? limits.min : 1,
        max: limits?.max ? limits.max : 1000,
    };
    const safeValue =
        value >= localLimits.min && value <= localLimits.max
            ? value
            : localLimits.min;

    const [inputValue, setInputValue] = useState(safeValue);

    useEffect(() => {
        setInputValue(safeValue);
        setData(name, String(safeValue));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [safeValue]);

    return (
        <div className={cn("flex flex-col w-full gap-1.5", className)}>
            <Label htmlFor={name}>{label + (required ? " *" : "")}</Label>
            <div className="flex w-full">
                <Input
                    id={id}
                    name={name}
                    type="number"
                    placeholder={useTrans(placeholder)}
                    value={inputValue}
                    min={localLimits.min}
                    max={localLimits.max}
                    step={step}
                    onChange={(e) => {
                        setInputValue(Number(e.target.value));
                        setData(name, e.target.value);
                    }}
                    required={required}
                    disabled={disabled}
                    className={cn("w-full", {
                        "border-destructive/50": localErrors[name],
                    })}
                />
            </div>
            <InputError message={localErrors[name]} />
        </div>
    );
}