import { __assign, __read, __rest } from "tslib";
import React, { forwardRef, useState, useEffect } from "react";
import { IconBrokenSearchNormal, IconBrokenMoreCircle, IconBrokenCloseCircle } from "@greenatom/icons";
import useDebounce from "../hooks/useDebounce";
import { SearchBoxStyled, IconWrapper, InputStyled, InputWrapper, LabelStyled, ButtonStyled, IconWrapperMarginRight, IconWidth } from "./styles";
var SearchBoxComponent = forwardRef(function (_a, ref) {
    var _b = _a.placeholder, placeholder = _b === void 0 ? "Начнём искать..." : _b, id = _a.id, name = _a.name, _c = _a.onChange, onChange = _c === void 0 ? function () {
        /* */
    } : _c, status = _a.status, _d = _a.value, value = _d === void 0 ? "" : _d, isDisabled = _a.isDisabled, inputRef = _a.inputRef, wait = _a.wait, onFocus = _a.onFocus, onBlur = _a.onBlur, tabIndex = _a.tabIndex, width = _a.width, maxLength = _a.maxLength, style = _a.style, onKeyDown = _a.onKeyDown, _e = _a.type, type = _e === void 0 ? "basic" : _e, isStatusIcon = _a.isStatusIcon, statusText = _a.statusText, _f = _a.size, size = _f === void 0 ? "l" : _f, className = _a.className, _g = _a.viewType, viewType = _g === void 0 ? "round" : _g, _h = _a.testId, testId = _h === void 0 ? "searchBox" : _h, props = __rest(_a, ["placeholder", "id", "name", "onChange", "status", "value", "isDisabled", "inputRef", "wait", "onFocus", "onBlur", "tabIndex", "width", "maxLength", "style", "onKeyDown", "type", "isStatusIcon", "statusText", "size", "className", "viewType", "testId"]);
    var _j = __read(useState(value), 2), searchText = _j[0], setSearchText = _j[1];
    var _k = __read(useState(false), 2), isFocused = _k[0], setFocused = _k[1];
    var onChangeDebounce = useDebounce(onChange, typeof wait === "number" ? wait : 500);
    useEffect(function () {
        if (value !== searchText) {
            setSearchText(value);
        }
    }, [value]);
    var handleChange = function (event) {
        var search = event.target.value;
        setSearchText(search);
        !isDisabled && onChangeDebounce(event, search, { id: id, name: name });
    };
    var handleBlur = function (event) {
        var _value = event.target.value;
        onBlur && onBlur(event, _value);
        setFocused(false);
    };
    var handleFocus = function (event) {
        onFocus && onFocus(event);
        setFocused(true);
    };
    var handleClear = function (event) {
        event.preventDefault();
        event.stopPropagation();
        setFocused(false);
        onChange === null || onChange === void 0 ? void 0 : onChange(event, "", { id: id, name: name });
    };
    var handleKeyDown = function (event) {
        var search = event.currentTarget.value;
        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, search, { id: id, name: name });
    };
    return (React.createElement(SearchBoxStyled, __assign({ ref: ref, "data-testid": testId, width: width, style: style, size: size, isFocused: isFocused, className: className }, props),
        React.createElement(InputWrapper, { isDisabled: isDisabled, size: size, onFocus: handleFocus, status: status, isFocused: isFocused, viewType: viewType, isHasValue: Boolean(searchText) },
            !isFocused && (React.createElement(IconWrapper, null,
                React.createElement(IconBrokenSearchNormal, { width: IconWidth, height: 16, className: "search-box__icon" }))),
            React.createElement(InputStyled, { placeholder: placeholder, value: searchText, "data-testid": "input-" + testId, onChange: handleChange, disabled: isDisabled, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, tabIndex: tabIndex, onKeyDown: handleKeyDown }),
            isFocused && (React.createElement("div", { style: { width: IconWrapperMarginRight + IconWidth + "px" } }, "\u00A0")),
            value && !isDisabled && (React.createElement(ButtonStyled, { onClick: handleClear },
                React.createElement(IconBrokenCloseCircle, { width: 16, height: 16 }))),
            type === "global" && (React.createElement(ButtonStyled, { className: "search-box__icon" },
                React.createElement(IconBrokenMoreCircle, { width: 16, height: 16 })))),
        statusText && status && !isDisabled && (React.createElement(LabelStyled, { status: status, isIcon: isStatusIcon, "data-testid": testId + "_status-text" }, statusText))));
});
SearchBoxComponent.displayName = "SearchBox";
export default SearchBoxComponent;
