import { __assign, __read, __rest } from "tslib";
import React, { useMemo, forwardRef } from "react";
import { IconBrokenArrowDown2, IconBrokenArrowRight } from "@greenatom/icons";
import H from "../../../typography/H";
import { useStateProps } from "../../../hooks/useStateProps";
import { Avatar } from "../../../Avatar";
import { ListHeaderStyled, IconWrapper } from "./styles";
var ListHeader = forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.isSelectedDefault, isSelectedDefault = _b === void 0 ? false : _b, isDisabled = _a.isDisabled, leadIcon = _a.leadIcon, trailIcon = _a.trailIcon, className = _a.className, style = _a.style, onClick = _a.onClick, _c = _a.viewType, viewType = _c === void 0 ? "basic" : _c, avatar = _a.avatar, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "isSelectedDefault", "isDisabled", "leadIcon", "trailIcon", "className", "style", "onClick", "viewType", "avatar", "size"]);
    var _e = __read(useStateProps(isSelectedDefault), 2), isSelected = _e[0], setIsSelected = _e[1];
    var handleClick = function (event) {
        if (!isDisabled) {
            setIsSelected(!isSelected);
            onClick === null || onClick === void 0 ? void 0 : onClick(event);
        }
    };
    var trailContent = useMemo(function () {
        if (viewType === "collapse") {
            return (React.createElement(IconWrapper, { className: "list-header__collapse-icon-wpapper" },
                React.createElement(IconBrokenArrowDown2, { className: "list-header__collapse-icon", width: 12, height: 12 })));
        }
        if (viewType === "arrow") {
            return (React.createElement(IconWrapper, { className: "list-header__trail-content" },
                React.createElement(IconBrokenArrowRight, { width: 16, height: 16 })));
        }
        if (trailIcon) {
            return (React.createElement(IconWrapper, { className: "list-header__trail-content" }, trailIcon));
        }
        return null;
    }, [viewType, trailIcon]);
    return (React.createElement(ListHeaderStyled, __assign({ as: "div", isSelected: viewType === "basic" ? false : isSelected, isDisabled: isDisabled, className: className, style: style, size: size !== "s" ? size : "m", onClick: handleClick, ref: ref }, props),
        React.createElement(React.Fragment, null,
            !avatar && leadIcon && React.createElement(IconWrapper, null, leadIcon),
            avatar && React.createElement(Avatar, __assign({}, avatar, { isDisabled: isDisabled, size: "m" })),
            typeof children === "string" ? (React.createElement(H, { type: "capricornus", as: "h6" }, children)) : ({ children: children }),
            trailContent)));
});
ListHeader.displayName = "ListHeader";
export default ListHeader;
