import { __assign, __read, __rest } from "tslib";
import React, { useMemo, useState } from "react";
import { IconBrokenUser } from "@greenatom/icons";
import Select from "react-select";
import getValueObject from "../utils/getValueObject";
import { Avatar } from "../Avatar";
import { SelectContainer, SelectClearIndicator, SelectValueContainer, SelectSingleValue, SelectIndicators, SelectControl, SelectPlaceholder } from "../SelectBase";
import SelectDropdownIndicator from "./components/SelectDropdownIndicator";
import SelectMenu from "./components/SelectMenu";
import SelectOption from "./components/SelectOption";
var SelectComponent = function (props) {
    var _a = props.placeholder, placeholder = _a === void 0 ? "" : _a, isDisabled = props.isDisabled, options = props.options, menuIsOpen = props.menuIsOpen, onChange = props.onChange, defaultValue = props.defaultValue, _b = props.isClearable, isClearable = _b === void 0 ? true : _b, name = props.name, value = props.value, onInputChange = props.onInputChange, isSearchable = props.isSearchable, className = props.className, errorMessage = props.errorMessage, _c = props.isError, isError = _c === void 0 ? false : _c, width = props.width, isRequired = props.isRequired, _d = props.size, size = _d === void 0 ? "l" : _d, onInnerMenuOpen = props.onInnerMenuOpen, status = props.status, statusText = props.statusText, iconLeft = props.iconLeft, _e = props.fieldNames, fieldNames = _e === void 0 ? { value: "value", label: "label" } : _e, _f = props.onChangeReturnType, onChangeReturnType = _f === void 0 ? "instance" : _f, onBlur = props.onBlur, onFocus = props.onFocus, _g = props.type, type = _g === void 0 ? "basic" : _g, isDrawer = props.isDrawer, viewType = props.viewType, isReadOnly = props.isReadOnly, otherProps = __rest(props, ["placeholder", "isDisabled", "options", "menuIsOpen", "onChange", "defaultValue", "isClearable", "name", "value", "onInputChange", "isSearchable", "className", "errorMessage", "isError", "width", "isRequired", "size", "onInnerMenuOpen", "status", "statusText", "iconLeft", "fieldNames", "onChangeReturnType", "onBlur", "onFocus", "type", "isDrawer", "viewType", "isReadOnly"]);
    var _h = __read(useState(undefined), 2), avatarUrl = _h[0], setAvatarUrl = _h[1];
    var localValue = useMemo(function () {
        if (options && typeof value !== "object") {
            return options.find(function (option) { return getValueObject(option, fieldNames.value) === value; });
        }
        return value;
    }, [options, fieldNames, value, isReadOnly]);
    var iconLeftSelect = useMemo(function () {
        if (type === "avatar") {
            return (React.createElement(Avatar, { size: "s", as: "div", icon: React.createElement(IconBrokenUser, null), image: avatarUrl, isDisabled: isDisabled }));
        }
        return iconLeft;
    }, [type, iconLeft, avatarUrl, isDisabled]);
    // У react-select есть лимит на получение количества пропсов, чтобы его обойти использую left props
    var leftProps = __assign({ errorMessage: errorMessage, isError: isError, width: width, isRequired: isRequired, size: size, onInnerMenuOpen: onInnerMenuOpen, status: status, statusText: statusText, onFocus: onFocus, onBlur: onBlur, iconLeft: iconLeftSelect, type: type, isDrawer: isDrawer, viewType: viewType, isReadOnly: isReadOnly }, otherProps);
    var handleChange = function (newValue, actionMeta) {
        var _a, _b, _c;
        if (onChangeReturnType === "instance") {
            (_a = onChange) === null || _a === void 0 ? void 0 : _a(newValue, actionMeta);
        }
        else if (newValue) {
            (_b = onChange) === null || _b === void 0 ? void 0 : _b(getValueObject(newValue, fieldNames.value, null), actionMeta);
        }
        if (type === "avatar") {
            setAvatarUrl((_c = newValue) === null || _c === void 0 ? void 0 : _c.url);
        }
    };
    // Есть проблемы с TS в самом реакт селекте и не получается всё типизировать
    return (React.createElement(Select, __assign({ components: {
            SelectContainer: SelectContainer,
            Menu: SelectMenu,
            IndicatorsContainer: SelectIndicators,
            DropdownIndicator: SelectDropdownIndicator,
            ClearIndicator: SelectClearIndicator,
            Control: SelectControl,
            Placeholder: SelectPlaceholder,
            ValueContainer: SelectValueContainer,
            SingleValue: SelectSingleValue,
            Option: SelectOption
        }, name: name, maxMenuHeight: 328, value: localValue, defaultValue: defaultValue, getOptionValue: function (option) {
            return getValueObject(option, fieldNames.value);
        }, getOptionLabel: function (option) {
            return getValueObject(option, fieldNames.label);
        }, menuIsOpen: menuIsOpen, menuPlacement: "auto", isMulti: false, isSearchable: isSearchable, options: options, isDisabled: isDisabled || isReadOnly, placeholder: placeholder, onChange: handleChange, onInputChange: onInputChange, isClearable: isReadOnly ? false : isClearable, className: className, classNamePrefix: "react-select", captureMenuScroll: false }, leftProps)));
};
export default SelectComponent;
