import React from 'react';
import Tag from '../Tag/Tag';
import Input from '../Input';
import { st, classes } from './InputWithTags.st.css.js';
import classNames from 'classnames';
import SortableListBase from '../SortableListBase/SortableListBase';
import defaultDndStyles from '../dnd-styles';
import StatusIndicator from '../StatusIndicator';
import { StatusContext, getStatusFromContext, getAriaAttributesFromContext, } from '../FormField/StatusContext';
import { DropDownArrow } from '@wix/wix-ui-icons-common/system';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
class InputWithTags extends React.Component {
    constructor(props) {
        super(props);
        this.focus = this.focus.bind(this);
        this.blur = this.blur.bind(this);
        this.select = this.select.bind(this);
        this.renderReorderableTag = this.renderReorderableTag.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.handleInputFocus = this.handleInputFocus.bind(this);
        this.handleInputBlur = this.handleInputBlur.bind(this);
        this.state = { inputValue: '', inputHasFocus: false };
    }
    componentDidMount() {
        this.props.autoFocus && this.props.onFocus();
    }
    handleClick(e) {
        if (!this.props.disabled) {
            this.input.focus();
            this.props.onInputClicked && this.props.onInputClicked(e);
        }
    }
    handleInputFocus(e) {
        this.setState({ inputHasFocus: true });
        this.props.onFocus && this.props.onFocus(e);
    }
    handleInputBlur(e) {
        this.setState({ inputHasFocus: false });
        this.props.onBlur && this.props.onBlur(e);
    }
    _isSelectMode() {
        return this.props.mode === 'select';
    }
    _hasFocus() {
        return this.state.inputHasFocus && !this.props.disabled;
    }
    _getRootClassName() {
        const { status, disabled, readOnly, size = 'medium', border, className, } = this.props;
        const appliedClasses = [
            className,
            this._isSelectMode() && classes.selectMode,
        ].filter(Boolean);
        return st(classes.root, {
            border,
            disabled,
            hasFocus: this._hasFocus(),
            status: getStatusFromContext(this.context, status),
            readOnly,
            size,
        }, ...appliedClasses);
    }
    render() {
        const { tags, onRemoveTag, onReorder, placeholder, status, statusMessage, disabled, readOnly, delimiters, mode, size = 'medium', border, className, ...inputProps } = this.props;
        const { onManuallyInput, inputElement, closeOnSelect, predicate, onClickOutside, fixedHeader, fixedFooter, dataHook, onFocus, withSelection, onBlur, menuArrow, onInputClicked, ...desiredProps } = inputProps;
        let rowMultiplier;
        if (tags.length && tags[0].size === 'large') {
            rowMultiplier = 47;
        }
        else {
            rowMultiplier = 35;
        }
        const maxHeight = this.props.maxHeight ||
            this.props.maxNumRows * rowMultiplier ||
            'initial';
        const finalStatus = getStatusFromContext(this.context, status);
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const DropDownArrowIcon = icons.InputWithTags?.DropDownArrow || DropDownArrow;
            return (React.createElement("div", { className: this._getRootClassName(), style: { maxHeight }, onClick: this.handleClick, "data-hook": this.props.dataHook, "data-focus": this._hasFocus() || null, "data-status": finalStatus, ...getAriaAttributesFromContext(this.context) },
                React.createElement("div", { className: classes.scrollableContent },
                    this.props.customPrefix &&
                        !this.props.hideCustomSuffix &&
                        !this.state.inputHasFocus && (React.createElement("span", { "data-hook": "custom-prefix", className: classes.customPrefix }, this.props.customPrefix)),
                    onReorder ? (React.createElement(SortableListBase, { contentClassName: classes.tagsContainer, items: tags, onDrop: onReorder, renderItem: this.renderReorderableTag })) : (tags.map(({ label, ...rest }) => (React.createElement(Tag, { key: rest.id, dataHook: "tag", disabled: disabled, onRemove: onRemoveTag, removable: !readOnly, ...rest }, label)))),
                    React.createElement("span", { className: classNames(classes.inputWrapper, !tags.length), "data-hook": "inner-input-with-tags" },
                        React.createElement("div", { className: classNames(classes.hiddenDiv) }, this.state.inputValue),
                        React.createElement(Input, { className: classes.input, size: size, width: this.props.width, ref: input => {
                                this.input = input;
                            }, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, placeholder: tags.length === 0 ? placeholder : '', ...desiredProps, dataHook: "inputWithTags-input", disabled: disabled, readOnly: readOnly, disableEditing: this._isSelectMode(), onChange: e => {
                                if (!delimiters.includes(e.target.value)) {
                                    this.setState({ inputValue: e.target.value });
                                    desiredProps.onChange && desiredProps.onChange(e);
                                }
                            }, withSelection: true, prefix: this.props.customSuffix &&
                                !this.props.hideCustomSuffix &&
                                !this.state.inputHasFocus && (React.createElement("span", { "data-hook": "custom-suffix", className: classes.customSuffix }, this.props.customSuffix)), hideStatusSuffix: true }))),
                React.createElement("div", { className: classes.inputSuffix },
                    !disabled &&
                        (['error', 'warning', 'loading'].includes(status) ||
                            finalStatus === 'loading') && (React.createElement("div", { className: classes.statusIndicator },
                        React.createElement(StatusIndicator, { status: finalStatus, message: statusMessage, dataHook: "input-status" }))),
                    this._isSelectMode() && (React.createElement("div", { className: classes.menuArrow, "data-hook": "input-menu-arrow" },
                        React.createElement(DropDownArrowIcon, null))))));
        }));
    }
    renderReorderableTag({ item: { id, label, ...itemProps }, previewStyles, isPlaceholder, isPreview, ...rest }) {
        const { onRemoveTag, disabled, readOnly } = this.props;
        const _classes = classNames({
            [defaultDndStyles.itemPlaceholder]: isPlaceholder,
            [classes.draggedTagPlaceholder]: isPlaceholder,
            [defaultDndStyles.itemPreview]: isPreview,
            [classes.draggedTag]: isPreview,
        });
        return (React.createElement("div", { style: previewStyles },
            React.createElement(Tag, { id: id, dataHook: "tag", disabled: disabled, className: _classes, onRemove: onRemoveTag, removable: !readOnly, ...itemProps, ...rest }, label)));
    }
    focus() {
        this.input.focus();
    }
    blur() {
        this.input.blur();
    }
    select() {
        this.input.select();
    }
    clear() {
        this.input.clear();
    }
}
InputWithTags.contextType = StatusContext;
InputWithTags.defaultProps = {
    onRemoveTag: () => { },
    tags: [],
    placeholder: '',
    delimiters: [],
};
export default InputWithTags;
//# sourceMappingURL=InputWithTags.js.map