import React, { useRef } from 'react';

interface MaxMinLenAttrIntr {
    maxLength: number;
    minLength: number;
    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
}

const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, handlePropertyChange }) => {
    const firstChangedField = useRef<null | 'minLength' | 'maxLength'>(null);

    const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newMax = Number(e.target.value);
        if (!firstChangedField.current) {
            firstChangedField.current = 'maxLength';
        }

        if (firstChangedField.current === 'minLength' && newMax < minLength) {
            alert(`Max Length must be greater than or equal to Min Length (${minLength})`);
            return;
        }

        handlePropertyChange('maxLength', newMax);
    };

    const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newMin = Number(e.target.value);
        if (!firstChangedField.current) {
            firstChangedField.current = 'minLength';
        }

        if (firstChangedField.current === 'maxLength' && newMin > maxLength) {
            alert(`Min Length must be less than or equal to Max Length (${maxLength})`);
            return;
        }

        handlePropertyChange('minLength', newMin);
    };

    return (
        <>
            <div className="flex flex-col">
                <label className="font-medium" htmlFor="maxLength">Max Length</label>
                <input
                    id="maxLength"
                    value={maxLength}
                    type="number"
                    min={0}
                    className="outline-none border-1 rounded px-2 py-1 border-slate-200"
                    onChange={handleMaxChange}
                />
            </div>
            <div className="flex flex-col">
                <label className="font-medium" htmlFor="minLength">Min Length</label>
                <input
                    id="minLength"
                    value={minLength}
                    type="number"
                    min={0}
                    className="outline-none border-1 rounded px-2 py-1 border-slate-200"
                    onChange={handleMinChange}
                />
            </div>
        </>
    );
};

export default MaxMinLenAttr;