import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import MuiInputAdornment from '@mui/material/InputAdornment';
import Icon from '../components/Icon.js';
import IconButton from '../components/IconButton.js';
import TextField from '../components/TextField.js';
import { textFieldArgTypes } from './utils/formControlStories.js';
import { getAdornmentIconProps } from './utils/adornmentStories.js';
import '@mui/material/styles';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import '@mui/material/IconButton';
import '@mui/material/TextField';
import '../theme/colors.js';
import '../components/EndAdornment.js';
import '@mui/material/Box';
import '../components/Button.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../components/Input.js';
import '@mui/material/Input';
import './utils/iconStories.js';

var Template = function (args) {
    var startAdornmentIconProps = getAdornmentIconProps(args, "start");
    var endAdornmentIconProps = getAdornmentIconProps(args, "end");
    var id = args.id, label = args.label, helperText = args.helperText, error = args.error, disabled = args.disabled, fullWidth = args.fullWidth, size = args.size, color = args.color, placeholder = args.placeholder, actionButton = args.actionButton;
    return (jsx(TextField, { id: id, label: label, helperText: helperText, placeholder: placeholder, size: size, color: color, error: error, disabled: disabled, fullWidth: fullWidth, actionButtonProps: actionButton ? { disabled: false, children: "Submit", onClick: function () { return console.log("clicked"); } } : undefined, InputProps: {
            startAdornment: startAdornmentIconProps ? (jsx(MuiInputAdornment, __assign({ position: "start" }, { children: jsx(Icon, __assign({}, startAdornmentIconProps), void 0) }), void 0)) : undefined,
            endAdornment: endAdornmentIconProps ? (jsx(MuiInputAdornment, __assign({ position: "end" }, { children: jsx(Icon, __assign({}, endAdornmentIconProps), void 0) }), void 0)) : undefined
        } }, void 0));
};
/**
 * Stories
 */
var Default = Template.bind({});
var ClearText = function () {
    var _a = React__default.useState(""), value = _a[0], setValue = _a[1];
    var handleChange = function (event) {
        setValue(event.target.value);
    };
    return (jsx(TextField, { id: "clear-text", label: "Find validator", helperText: "Address should be shorter than 5 characters", placeholder: "Please enter validator address", color: "secondary", value: value, onChange: handleChange, error: value.length > 5, fullWidth: true, InputProps: {
            startAdornment: (jsx(MuiInputAdornment, __assign({ position: "start" }, { children: jsx(Icon, { iconKey: "search", size: "md" }, void 0) }), void 0)),
            endAdornment: (jsx(MuiInputAdornment, __assign({ position: "end" }, { children: jsx(IconButton, { iconProps: { iconKey: "close", size: "md", color: "secondary" }, onClick: function () { return setValue(""); } }, void 0) }), void 0))
        } }, void 0));
};
var ActionButton = function () {
    var _a = React__default.useState(""), value = _a[0], setValue = _a[1];
    var _b = React__default.useState(false), isError = _b[0], setIsError = _b[1];
    var handleChange = function (event) {
        setValue(event.target.value);
        setIsError(value.length >= 1 && !value.includes("@"));
    };
    return (jsx(TextField, { id: "action-button", label: "Email", helperText: "Please enter valid email address", placeholder: "Please enter email address", value: value, onChange: handleChange, error: isError, actionButtonProps: { disabled: false, children: "Submit", onClick: function () { return console.log("clicked"); } }, InputProps: {
            startAdornment: (jsx(MuiInputAdornment, __assign({ position: "start" }, { children: jsx(Icon, { iconKey: "search", size: "md" }, void 0) }), void 0)),
            endAdornment: !isError ? (jsx(MuiInputAdornment, __assign({ position: "end" }, { children: jsx(Icon, { iconKey: "arrowRight", size: "md" }, void 0) }), void 0)) : undefined
        } }, void 0));
};
var TextField_stories = {
    title: "Form Controls/TextField",
    component: TextField,
    argTypes: textFieldArgTypes
};

export { ActionButton, ClearText, Default, TextField_stories as default };
