import React, {useState} from 'react';
import Tooltip from '../../../components/core/Tooltip';
import { displayProPopup } from '../../../Helper';
import { translate } from '../../../Helper';


const Input = ({ id, label, tooltip, type = 'text', width = '320', value, onChange, marginTop, isPro=true }) => {
    const [mouseHover, setMouseHover] = useState(false);

    const handleMouseEnter = () => {
        setMouseHover(true);
    };
  
    const handleMouseLeave = () => {
        setMouseHover(false);
    };

    // Custom onChange handler to prevent negative numbers for type="number" inputs
    const handleChange = (e) => {
        let { value: newValue } = e.target;
    
        // Check if the input type is "number" and if the value includes a negative sign
        if (type === 'number' && newValue.includes('-')) {
            // Remove the negative sign immediately
            newValue = newValue.replace('-', '');
        }
    
        // Create a new event with the sanitized value
        const updatedEvent = { ...e, target: { ...e.target, value: newValue } };
    
        // Call the onChange prop with the updated event
        onChange(updatedEvent);
    };
    

    return (
        <div className={`input-wrapper ${ marginTop? marginTop : ''} ${mouseHover ? "pro-lock-hover" : "" }`}>
            <label  onClick={ !isPro ? displayProPopup : undefined }   htmlFor={id} className="ecre-text-gray-900 ecre-text-sm ecre-font-medium ecre-inline-block ecre-pb-2">
                <span  className={`ecre-mr-2.5 ${ !isPro ? 'ecre-opacity-50' : ''}`}>{label}</span>
                {tooltip && <Tooltip className="align-[-2px] ecre-mr-1" content={tooltip} />}
                {!isPro && (
                    <button className='ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal ' onClick={displayProPopup}>
                            <span className="icon-wrap">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                    <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0"/>
                                    <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0"/>
                                </svg>
                            </span>
                            <span className="text">
                                {translate('upgrade')}
                            </span>
                    </button>
                )}
            </label>
            <div className="input-wrapper__inner">
                <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className="input-wrap ecre-w-full ecre-inline-block" style={{ maxWidth: `${width}px` }} onClick={ !isPro ? displayProPopup : undefined }> 
                    <input 
                        id={id}
                        type={type}
                        value={value}
                        onChange={handleChange}
                        {...(type === "number" ? { min: 0 } : {})}
                        className={`!ecre-text-gray-900 !ecre-shadow-none !ecre-text-sm !ecre-font-normal ecre-bg-white !ecre-p-[15px] ecre-w-full !ecre-rounded-lg !ecre-border !ecre-border-[#9CA3AF] ${!isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`}
                        style={{ maxWidth: `${width}px` }}
                        // disabled={!isPro}
                    />
                </div>
            </div>

        </div>
    );
};

export default Input;