import { __assign, __read } from "tslib";
// @ts-nocheck
import './HeaderMenuMobile.css';
import React, { useState } from 'react';
import { useChoiceGroup } from '../../../hooks/useChoiceGroup/useChoiceGroup';
import { IconArrowDown } from '../../../icons/IconArrowDown/IconArrowDown';
import { IconOpenInNew } from '../../../icons/IconOpenInNew/IconOpenInNew';
import { cn } from '../../../utils/bem';
import { Button } from '../../Button/Button';
import { Picture } from '../../Picture/Picture';
export var cnHeaderMenuMobile = cn('HeaderMenuMobile');
export 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 = __read(useState(null), 2), openedKeys = _b[0], setOpenedKeys = _b[1];
    var _c = 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.createElement("nav", { className: cnHeaderMenuMobile(null, [className]) },
        React.createElement("ul", { className: 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.createElement("li", { className: cnHeaderMenuMobile('Item'), key: cnHeaderMenuMobile('Item', { index: index }) },
                React.createElement("div", { className: cnHeaderMenuMobile('ItemWrapper') },
                    React.createElement(Button, __assign({ className: cnHeaderMenuMobile('Link', {}), view: "transparent", as: "a", label: title, size: "s", isLink: !externalLink, align: "left" }, tagWrapperAttrs)),
                    subItems && (React.createElement(Button, { className: cnHeaderMenuMobile('CollapseIcon', {
                            active: getChecked(item)
                        }), view: "transparent", size: "s", iconRight: IconArrowDown, align: "left", onClick: function (e) { return getOnChange(item)(e); } }))),
                subItems && (React.createElement("ul", { className: 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.createElement("li", { className: cnHeaderMenuMobile('SubItem', {
                                column: true
                            }), key: cnHeaderMenuMobile('SubItem', { index: index }) },
                            React.createElement("ul", { className: 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.createElement("li", { className: cnHeaderMenuMobile('SubItem'), key: cnHeaderMenuMobile('SubItem', {
                                        index: index
                                    }) }, !externalLink ? (React.createElement(Button, __assign({ className: cnHeaderMenuMobile('Link'), view: "text", as: "a", label: title, size: "s", isLink: !externalLink }, tagWrapperAttrs, { align: "left" }))) : (React.createElement(Button, __assign({ className: cnHeaderMenuMobile('Link'), view: "ghost", as: "a", label: title, size: "s", align: "left" }, tagWrapperAttrs, { href: externalLink, iconRight: IconOpenInNew, iconLeft: function () { return React.createElement(Picture, __assign({}, logo)); } })))));
                            }))));
                    }
                    return (React.createElement("li", { className: cnHeaderMenuMobile('SubItem'), key: cnHeaderMenuMobile('SubItem', { index: index }) },
                        React.createElement(Button, __assign({ className: cnHeaderMenuMobile('Link', {}), view: "text", align: "left", as: "a", label: title, size: "s", isLink: !externalLink }, tagWrapperAttrs))));
                })))));
        }))));
};
