// Tailwind
import { Logger } from "../../Utils/Logger";
import useTranslateValue from "../../Utils/Translation";
import Icon from "../Icon/Icon";
import OneUptimeDate from "../../../Types/Date";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useEffect, useRef, useState, } from "react";
export var InputType;
(function (InputType) {
    InputType["TEXT"] = "text";
    InputType["NUMBER"] = "number";
    InputType["DATE"] = "date";
    InputType["DATETIME_LOCAL"] = "datetime-local";
    InputType["URL"] = "url";
    InputType["TIME"] = "time";
})(InputType || (InputType = {}));
const Input = (props) => {
    const { translateString } = useTranslateValue();
    let className = "";
    if (!props.className) {
        className =
            "block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm";
    }
    else {
        className = props.className;
    }
    if (props.error) {
        className +=
            " border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500";
    }
    if (props.disabled) {
        className += " bg-gray-100 text-gray-500 cursor-not-allowed";
    }
    const [value, setValue] = useState("");
    const [displayValue, setDisplayValue] = useState("");
    const ref = useRef(null);
    useEffect(() => {
        if (props.type === InputType.DATE ||
            props.type === InputType.DATETIME_LOCAL) {
            if (value && value instanceof Date) {
                let dateString = "";
                try {
                    if (props.type === InputType.DATETIME_LOCAL) {
                        dateString = OneUptimeDate.toDateTimeLocalString(value);
                    }
                    else {
                        dateString = OneUptimeDate.asDateForDatabaseQuery(value);
                    }
                }
                catch (e) {
                    Logger.error(e);
                }
                setDisplayValue(dateString);
            }
            else if (value &&
                value.includes &&
                !value.includes(" - ")) {
                // " - " is for InBetween dates.
                const date = OneUptimeDate.fromString(value);
                let dateString = "";
                try {
                    if (props.type === InputType.DATETIME_LOCAL) {
                        dateString = OneUptimeDate.toDateTimeLocalString(date);
                    }
                    else {
                        dateString = OneUptimeDate.asDateForDatabaseQuery(date);
                    }
                }
                catch (err) {
                    Logger.error(err);
                }
                setDisplayValue(dateString);
            }
            else if (!value ||
                (value.includes && !value.includes(" - "))) {
                setDisplayValue("");
            }
        }
        else {
            setDisplayValue(value);
        }
    }, [value]);
    useEffect(() => {
        const input = ref.current;
        if (input) {
            input.value = displayValue;
        }
    }, [ref, displayValue]);
    useEffect(() => {
        if (props.initialValue) {
            setValue(props.initialValue);
        }
        if (props.value) {
            setValue(props.value);
        }
    }, []);
    useEffect(() => {
        if (props.initialValue) {
            setValue(props.initialValue);
        }
    }, [props.initialValue]);
    useEffect(() => {
        setValue(props.value ? props.value : props.initialValue || "");
    }, [props.value]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: props.outerDivClassName ||
                `relative mt-2 mb-1 rounded-md shadow-sm w-full` },
            React.createElement("input", { autoFocus: props.autoFocus, ref: ref, onFocus: props.onFocus, onClick: props.onClick, "data-testid": props.dataTestId, spellCheck: !props.disableSpellCheck, autoComplete: props.autoComplete, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? "input-error-message" : undefined, onChange: (e) => {
                    const value = e.target.value;
                    if ((props.type === InputType.DATE ||
                        props.type === InputType.DATETIME_LOCAL) &&
                        value) {
                        const date = OneUptimeDate.fromString(value);
                        const dateString = OneUptimeDate.toString(date);
                        setValue(dateString);
                        if (props.onChange) {
                            props.onChange(dateString);
                        }
                    }
                    else {
                        setValue(value);
                        if (props.onChange) {
                            props.onChange(value);
                        }
                    }
                }, tabIndex: props.tabIndex, onKeyDown: props.onEnterPress
                    ? (event) => {
                        var _a;
                        if (event.key === "Enter") {
                            (_a = props.onEnterPress) === null || _a === void 0 ? void 0 : _a.call(props);
                        }
                    }
                    : undefined, readOnly: props.readOnly || props.disabled || false, type: props.type || "text", step: props.type === InputType.DATETIME_LOCAL &&
                    props.showSecondsForDateTime
                    ? "1"
                    : undefined, placeholder: translateString(props.placeholder), className: className, onBlur: () => {
                    if (props.onBlur) {
                        props.onBlur();
                    }
                } }),
            props.error && (React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", "aria-hidden": "true" },
                React.createElement(Icon, { icon: IconProp.ErrorSolid, className: "h-5 w-5 text-red-500" })))),
        props.error && (React.createElement("p", { id: "input-error-message", "data-testid": "error-message", className: "mt-1 text-sm text-red-400", role: "alert" }, props.error))));
};
export default Input;
//# sourceMappingURL=Input.js.map