"use strict";
exports.__esModule = true;
exports.HeaderMenuMobile = exports.cnHeaderMenuMobile = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./HeaderMenuMobile.css");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var useChoiceGroup_1 = require("../../../hooks/useChoiceGroup/useChoiceGroup");
var IconArrowDown_1 = require("../../../icons/IconArrowDown/IconArrowDown");
var IconOpenInNew_1 = require("../../../icons/IconOpenInNew/IconOpenInNew");
var bem_1 = require("../../../utils/bem");
var Button_1 = require("../../Button/Button");
var Picture_1 = require("../../Picture/Picture");
exports.cnHeaderMenuMobile = (0, bem_1.cn)('HeaderMenuMobile');
var HeaderMenuMobile = function (_a) {
    var items = _a.items, className = _a.className, onClick = _a.onClick;
    var setParams = function (_a) {
        var externalLink = _a.externalLink, nodeUrl = _a.nodeUrl;
        return {
            to: !externalLink ? nodeUrl !== null && nodeUrl !== void 0 ? nodeUrl : '/404' : null,
            href: externalLink ? nodeUrl : null,
            target: externalLink ? '_blank' : null,
            width: 'full',
            onClick: onClick
        };
    };
    var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), openedKeys = _b[0], setOpenedKeys = _b[1];
    var _c = (0, useChoiceGroup_1.useChoiceGroup)({
        value: openedKeys,
        getKey: function (item) { return item.title; },
        callBack: function (params) {
            setOpenedKeys(params.value);
        },
        multiple: true
    }), getOnChange = _c.getOnChange, getChecked = _c.getChecked;
    return (react_1["default"].createElement("nav", { className: (0, exports.cnHeaderMenuMobile)(null, [className]) },
        react_1["default"].createElement("ul", { className: (0, exports.cnHeaderMenuMobile)('List') }, items.map(function (item, index) {
            var title = item.title, nodeUrl = item.nodeUrl, externalLink = item.externalLink, subItems = item.items;
            var tagWrapperAttrs = setParams({ externalLink: externalLink, nodeUrl: nodeUrl });
            return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenuMobile)('Item'), key: (0, exports.cnHeaderMenuMobile)('Item', { index: index }) },
                react_1["default"].createElement("div", { className: (0, exports.cnHeaderMenuMobile)('ItemWrapper') },
                    react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenuMobile)('Link', {}), view: "transparent", as: "a", label: title, size: "s", isLink: !externalLink, align: "left" }, tagWrapperAttrs)),
                    subItems && (react_1["default"].createElement(Button_1.Button, { className: (0, exports.cnHeaderMenuMobile)('CollapseIcon', {
                            active: getChecked(item)
                        }), view: "transparent", size: "s", iconRight: IconArrowDown_1.IconArrowDown, align: "left", onClick: function (e) { return getOnChange(item)(e); } }))),
                subItems && (react_1["default"].createElement("ul", { className: (0, exports.cnHeaderMenuMobile)('SubList', {
                        active: getChecked(item)
                    }) }, subItems.map(function (_a, index) {
                    var title = _a.title, nodeUrl = _a.nodeUrl, externalLink = _a.externalLink, items = _a.items;
                    var tagWrapperAttrs = setParams({
                        externalLink: externalLink,
                        nodeUrl: nodeUrl
                    });
                    if (items && items.length > 0) {
                        return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenuMobile)('SubItem', {
                                column: true
                            }), key: (0, exports.cnHeaderMenuMobile)('SubItem', { index: index }) },
                            react_1["default"].createElement("ul", { className: (0, exports.cnHeaderMenuMobile)('SubItemList') }, items.map(function (_a, index) {
                                var title = _a.title, nodeUrl = _a.nodeUrl, externalLink = _a.externalLink, logo = _a.logo;
                                var tagWrapperAttrs = setParams({
                                    externalLink: externalLink,
                                    nodeUrl: nodeUrl
                                });
                                return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenuMobile)('SubItem'), key: (0, exports.cnHeaderMenuMobile)('SubItem', {
                                        index: index
                                    }) }, !externalLink ? (react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenuMobile)('Link'), view: "text", as: "a", label: title, size: "s", isLink: !externalLink }, tagWrapperAttrs, { align: "left" }))) : (react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenuMobile)('Link'), view: "ghost", as: "a", label: title, size: "s", align: "left" }, tagWrapperAttrs, { href: externalLink, iconRight: IconOpenInNew_1.IconOpenInNew, iconLeft: function () { return react_1["default"].createElement(Picture_1.Picture, (0, tslib_1.__assign)({}, logo)); } })))));
                            }))));
                    }
                    return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenuMobile)('SubItem'), key: (0, exports.cnHeaderMenuMobile)('SubItem', { index: index }) },
                        react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenuMobile)('Link', {}), view: "text", align: "left", as: "a", label: title, size: "s", isLink: !externalLink }, tagWrapperAttrs))));
                })))));
        }))));
};
exports.HeaderMenuMobile = HeaderMenuMobile;
