import { __read } from "tslib";
import { IconBrokenCloseCircle } from "@greenatom/icons";
import React, { useState } from "react";
import Label from "../Label";
import P2 from "../typography/P2";
import { StyledInfoCard, MessageHolder, InfoCardHeader, CloseIconStyle, ButtonsStyled } from "./styles";
var InfoCardComponent = function (_a) {
    var label = _a.label, message = _a.message, onCloseClick = _a.onCloseClick, _b = _a.size, size = _b === void 0 ? "l" : _b, _c = _a.moreButtonText, moreButtonText = _c === void 0 ? "Подробнее" : _c, _d = _a.collapseButtonText, collapseButtonText = _d === void 0 ? "Свернуть" : _d, status = _a.status, width = _a.width, isClosableIcon = _a.isClosableIcon;
    var _e = __read(useState(false), 2), showMessage = _e[0], toggleMessage = _e[1];
    var messageToggler = function () {
        toggleMessage(function (previousValue) { return !previousValue; });
    };
    return (React.createElement(StyledInfoCard, { size: size, status: status, showMessage: showMessage, "$width": width },
        React.createElement(InfoCardHeader, null,
            React.createElement(Label, { status: status, size: size === "l" ? "m" : "s", isIcon: true }, label),
            isClosableIcon && (React.createElement(CloseIconStyle, { size: "xs", viewType: "ghost", icon: React.createElement(IconBrokenCloseCircle, { width: 16, height: 16 }), onClick: onCloseClick }))),
        showMessage && (React.createElement(MessageHolder, { showMessage: showMessage, size: size }, message)),
        React.createElement(ButtonsStyled, { showMessage: showMessage, viewType: "link", size: "xs", sizeInfoCard: size, className: "textToggler", onClick: messageToggler },
            React.createElement(P2, { type: "cetus" }, showMessage ? collapseButtonText : moreButtonText))));
};
export default InfoCardComponent;
