'use client'
import Box from "@mui/material/Box";
import { useRef } from "react";

import { CommonInputTextProps } from "@/types/common/common-input-text-props";
import cn from "@/utils/class-names";
import { isString } from "lodash";

const InputText: React.FC<CommonInputTextProps> = (props) => {
    const {
        labelText = "",
        dir = "ltr",
        labelClassName = "",
        value,
        name,
        className = "",
        replaceClassName = "",
        grayBg = false,
        type = "text",
        placeholder,
        autoComplete = "off",
        autoFocus = false,
        required = false,
        disabled = false,
        readOnly = false,
        error,
        inputRef = "",
        helperText = "",
        isMargingBottom = true,
        onChange = () => { },
        onKeyPress = () => { },
        endAdornment,
        startAdornment,
        ...restProps
    } = props;

    const ref = useRef<any>(null);

    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (onKeyPress) {
            onKeyPress(e);
            if (e.key === "Enter") {
                e.preventDefault(); //
                const form = e.currentTarget.form;
                if (form) {
                    const inputs = form.elements;
                    const index = Array.from(inputs).indexOf(e.currentTarget);
                    if (index !== -1 && index < inputs.length - 1) {
                        const nextInput = inputs[index + 1] as HTMLInputElement;
                        nextInput.focus();
                        // e.preventDefault();
                    }
                }
            }
        }
    };

    return (
        <>
            <Box
                component="div"
                sx={{
                    "& > :not(style)": { mb: isMargingBottom ? 1 : 0 },
                }}
                className={cn("w-full block", className)}
            >
                <div
                    className={cn(
                        "w-full",
                        isMargingBottom ? "mb-4" : "mb-0"
                    )}
                    dir={dir}
                >
                    {labelText && isString(labelText) && labelText?.trim() != "" && (
                        <div className={`block mb-1 text-sm font-medium text-primary ${labelClassName}`}>
                            {labelText}
                            {required && <span className="text-red-600">*</span>}
                        </div>
                    )}
                    <div className="relative flex">
                        {startAdornment && <div className="">{startAdornment}</div>}
                        <input
                            ref={inputRef || ref}
                            type={type}
                            name={name}
                            readOnly={readOnly}
                            defaultValue={value}
                            // value={value}
                            // required={required}
                            value={value ?? ""}
                            disabled={disabled}
                            autoFocus={autoFocus}
                            placeholder={placeholder}
                            className={
                                replaceClassName
                                    ? replaceClassName
                                    : `h-11 w-full rounded-lg px-4 text-sm outline-none text-[#000000] focus:border-[#304298] focus:ring-2 focus:ring-[#304298]/10 ${grayBg
                                        ? "bg-gray-100 border border-gray-300"
                                        : "border border-gray-300"
                                    }`
                            }
                            onChange={onChange}
                            onKeyPress={handleKeyPress}
                            {...restProps}
                        />
                        {endAdornment && <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 focus:outline-none">{endAdornment}</div>}
                    </div>
                    {(error || helperText) && <div className="text-red-500 text-[13px] mt-1">{error || helperText}</div>}
                </div>
            </Box>
        </>
    );
};

export default InputText;