"use strict";
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Plate = void 0;
/* eslint jsx-a11y/no-static-element-interactions: 0 */
var react_1 = __importDefault(require("react"));
var bem_react_classname_1 = require("bem-react-classname");
var icons_classic_1 = require("@alfalab/icons-classic");
var cn_1 = require("../cn");
var icon_button_1 = __importDefault(require("../icon-button/icon-button"));
/**
 * Компонент плашки.
 */
var Plate = /** @class */ (function (_super) {
    __extends(Plate, _super);
    function Plate() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.cn = bem_react_classname_1.createCn('plate');
        _this.state = {
            isHidden: false,
            isFolded: _this.props.folded,
        };
        _this.handleClick = function (event) {
            if (_this.props.onClick) {
                _this.props.onClick(event);
            }
        };
        _this.handleTitleClick = function (event) {
            if (_this.props.foldable) {
                _this.setState({
                    // eslint-disable-next-line react/no-access-state-in-setstate
                    isFolded: !_this.state.isFolded,
                });
            }
            if (_this.props.onTitleClick) {
                _this.props.onTitleClick(event);
            }
        };
        _this.handleTitleKeyDown = function (event) {
            if (_this.props.onTitleKeyDown) {
                _this.props.onTitleKeyDown(event);
            }
        };
        _this.handleFolderClick = function (event) {
            _this.setState({
                // eslint-disable-next-line react/no-access-state-in-setstate
                isFolded: !_this.state.isFolded,
            });
            if (_this.props.onFolderClick) {
                _this.props.onFolderClick(event);
            }
        };
        _this.handleCloserClick = function (event) {
            _this.setState({
                isHidden: true,
            });
            if (_this.props.onCloserClick) {
                _this.props.onCloserClick(event);
            }
        };
        _this.handleKeyDown = function (event) {
            if (_this.props.onKeyDown) {
                _this.props.onKeyDown(event);
            }
        };
        return _this;
    }
    Plate.prototype.render = function () {
        var _this = this;
        return (react_1.default.createElement("div", { className: this.cn({
                'has-closer': this.props.hasCloser,
                foldable: this.props.foldable,
                'has-icon': !!this.props.icon,
                hidden: this.props.hasCloser && this.state.isHidden,
                type: this.props.type,
            }), id: this.props.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: function (node) {
                _this.root = node;
            }, "data-test-id": this.props['data-test-id'] },
            this.props.icon
                && (react_1.default.createElement("span", { className: this.cn('icon') }, this.props.icon)),
            this.props.title
                && (react_1.default.createElement("div", { className: this.cn('title') },
                    react_1.default.createElement("span", { onClick: this.handleTitleClick, onKeyUp: this.handleTitleKeyDown }, this.props.title),
                    this.props.foldable
                        && (react_1.default.createElement(icon_button_1.default, { className: this.cn('folder'), onClick: this.handleFolderClick }, this.state.isFolded
                            ? react_1.default.createElement(icons_classic_1.ArrowDownMIcon, null)
                            : react_1.default.createElement(icons_classic_1.ArrowUpMIcon, null))))),
            react_1.default.createElement("div", { className: this.cn('content', {
                    folded: this.props.foldable && this.state.isFolded,
                }) },
                this.props.children,
                this.props.foldable
                    || (this.props.hasCloser
                        && (react_1.default.createElement(icon_button_1.default, { className: this.cn('closer'), onClick: this.handleCloserClick },
                            react_1.default.createElement(icons_classic_1.CloseMIcon, null)))))));
    };
    Plate.defaultProps = {
        foldable: false,
        folded: true,
        type: 'default',
        title: '',
    };
    return Plate;
}(react_1.default.PureComponent));
exports.Plate = Plate;
exports.default = cn_1.withTheme(Plate);

//# sourceMappingURL=plate.js.map
