import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import MuiTextField from '@mui/material/TextField';
import { CircleDotIcon, EyeIcon, EyeSlashIcon } from '@oxygen-ui/react-icons';
import clsx from 'clsx';
import { forwardRef, useState } from 'react';
import IconButton from '../IconButton';
import InputAdornment from '../InputAdornment';
import InputLabel from '../InputLabel';
import List from '../List';
import ListItem from '../ListItem';
import ListItemIcon from '../ListItemIcon';
import ListItemText from '../ListItemText';
import Tooltip from '../Tooltip';

/**
 * @deprecated Use the string literal i.e. "password" or "text" instead.
 * This will be removed in the next major release (v2.0.0).
 */
export var TextFieldInputTypes;
(function (TextFieldInputTypes) {
    TextFieldInputTypes["INPUT_PASSWORD"] = "password";
    TextFieldInputTypes["INPUT_TEXT"] = "text";
})(TextFieldInputTypes || (TextFieldInputTypes = {}));
const PasswordField = forwardRef((_a, ref) => {
    var { type, variant, InputProps } = _a, rest = __rest(_a, ["type", "variant", "InputProps"]);
    const [showPassword, setShowPassword] = useState(false);
    const handleClickShowPassword = () => setShowPassword((show) => !show);
    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };
    return (_jsx(MuiTextField, Object.assign({ ref: ref, type: showPassword ? 'text' : 'password', InputProps: Object.assign(Object.assign({}, (InputProps !== null && InputProps !== void 0 ? InputProps : {})), { endAdornment: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.endAdornment) || (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "toggle password visibility", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, edge: "end" }, { children: showPassword ? _jsx(EyeSlashIcon, {}) : _jsx(EyeIcon, {}) })) }))) }), variant: variant }, rest)));
});
const PasswordFieldWithCriteria = forwardRef((_a, ref) => {
    var { criteria, id } = _a, rest = __rest(_a, ["criteria", "id"]);
    const [openPasswordCriteriaTooltip, setOpenPasswordCriteriaTooltip] = useState(false);
    const handleClick = () => {
        setOpenPasswordCriteriaTooltip(true);
    };
    const handleBlurCapture = () => {
        if (openPasswordCriteriaTooltip) {
            setOpenPasswordCriteriaTooltip(false);
        }
    };
    const renderCriteriaTooltipContent = () => (_jsx(List, { children: criteria === null || criteria === void 0 ? void 0 : criteria.map((criterion) => (_jsxs(ListItem, Object.assign({ disablePadding: true }, { children: [_jsx(ListItemIcon, { children: _jsx(CircleDotIcon, {}) }), _jsx(ListItemText, { primary: criterion })] }), criteria.indexOf(criterion)))) }));
    if (!criteria) {
        return _jsx(PasswordField, Object.assign({}, rest));
    }
    return (_jsx(Tooltip, Object.assign({ arrow: true, placement: "right-end", describeChild: true, open: openPasswordCriteriaTooltip, title: renderCriteriaTooltipContent(), classes: {
            arrow: 'OxygenTextField-tooltipArrow oxygen-text-field-tooltip-arrow',
            tooltip: 'OxygenTextField-tooltip oxygen-text-field-tooltip',
        } }, { children: _jsx(PasswordField, Object.assign({ ref: ref, id: id, onClick: handleClick, onBlurCapture: handleBlurCapture, onFocus: handleClick }, rest)) })));
});
/**
 * The Text Fields let users enter and edit text..
 *
 * Demos:
 *
 * - [Autocomplete (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-autocomplete)
 * - [Autocomplete (MUI)](https://mui.com/material-ui/react-autocomplete/)
 * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
 * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
 *
 * API:
 *
 * - [TextField API](https://mui.com/material-ui/api/text-field/)
 * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
 *
 * @remarks
 * - ✔️ Props of the [FormControl](https://mui.com/material-ui/api/form-control/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the TextField component.
 * @param ref - The ref to be forwarded to the MuiTextField component.
 * @returns The rendered TextField component.
 */
const TextField = forwardRef((_a, ref) => {
    var { className, id, label, type, InputLabelProps, variant, size = 'small' } = _a, rest = __rest(_a, ["className", "id", "label", "type", "InputLabelProps", "variant", "size"]);
    return (_jsxs("div", Object.assign({ className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-text-field', 'OxygenTextField-wrapper', className) }, { children: [_jsx(InputLabel, Object.assign({ htmlFor: id, "aria-describedby": id }, InputLabelProps, { children: label })), type === TextFieldInputTypes.INPUT_PASSWORD ? (_jsx(PasswordFieldWithCriteria, Object.assign({ ref: ref, id: id, variant: variant, type: type, size: size }, rest))) : (_jsx(MuiTextField, Object.assign({ ref: ref, id: id, variant: variant, className: "OxygenTextField-root", type: type, size: size }, rest)))] })));
});
export default TextField;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n:root {\n  --oxygen-palette-ReadOnlyInput-bg: var(--oxygen-palette-grey-200);\n}\n\n:root[data-mui-color-scheme=dark] {\n  --oxygen-palette-ReadOnlyInput-bg: var(--oxygen-palette-grey-900);\n}\n\n.OxygenTextField-root .Mui-readOnly,\n.OxygenTextField-root .MuiInputBase-readOnly {\n  cursor: default;\n  background: var(--oxygen-palette-ReadOnlyInput-bg);\n}\n\n.oxygen-text-field-tooltip {\n  max-width: none;\n  padding: 0.5rem 0.7rem;\n}\n.oxygen-text-field-tooltip .oxygen-list {\n  padding: 0;\n}\n.oxygen-text-field-tooltip .oxygen-list .oxygen-list-item-icon {\n  min-width: 2rem;\n  color: var(--oxygen-palette-common-white);\n}");