"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
function ProductCategoryDropdownItem(_a) {
    var activeFilterExpression = _a.activeFilterExpression, categories = _a.categories, category = _a.category, level = _a.level, onFilterExpressionChange = _a.onFilterExpressionChange, parentId = _a.parentId;
    var initDropdownStyle = {
        position: 'absolute',
        left: "".concat(level === 0 ? 0 : 180, "px"),
        top: '50px',
        background: '#222222',
        width: '180px',
        zIndex: 9,
        padding: '5px 0',
        WebkitTransition: 'all, 0.3s',
        MozTransition: 'all, 0.3s',
        msTransition: 'all, 0.3s',
        OTransition: 'all, 0.3s',
        transition: 'all, 0.3s',
        opacity: '0',
        visibility: 'hidden'
    };
    var visibleDropdownStyle = {
        position: 'absolute',
        left: "".concat(level === 0 ? 0 : 180, "px"),
        marginTop: "".concat(level === 0 ? 0 : -30, "px"),
        top: '25px',
        background: '#222222',
        width: '180px',
        zIndex: 9,
        padding: '5px 0',
        WebkitTransition: 'all, 0.3s',
        MozTransition: 'all, 0.3s',
        msTransition: 'all, 0.3s',
        OTransition: 'all, 0.3s',
        transition: 'all, 0.3s',
        opacity: '1',
        visibility: 'visible'
    };
    // hook ktery umoznuje pridat state do function component
    var _b = React.useState(initDropdownStyle), dropdownStyle = _b[0], setDropdownStyle = _b[1];
    // get descendants
    var descendants = categories
        .filter(function (i) { return i.parentID === category.id; })
        .sort(function (a, b) { return (a.name > b.name ? 1 : -1); });
    return (React.createElement(React.Fragment, null,
        React.createElement("li", { className: "".concat(level === 0 ? '' : 'dropdown__item__li', " ").concat(activeFilterExpression === category.id.toString() ? 'active' : ''), onMouseOver: function () { return setDropdownStyle(visibleDropdownStyle); }, onMouseLeave: function () { return setDropdownStyle(initDropdownStyle); } },
            React.createElement("a", { className: level === 0 ? '' : 'dropdown__item__a', onClick: function () { return onFilterExpressionChange(category.id); } }, category.name),
            descendants.length
                ? React.createElement("ul", { key: "categoryDropdownMenu-".concat(category.id), style: dropdownStyle }, descendants.map(function (descendant) { return (React.createElement(ProductCategoryDropdownItem, { key: "categoryDropdownItem-".concat(descendant.id), activeFilterExpression: activeFilterExpression, categories: categories, category: descendant, level: level + 1, onFilterExpressionChange: onFilterExpressionChange, parentId: category.id })); }))
                : null)));
}
exports.default = ProductCategoryDropdownItem;
//# sourceMappingURL=ProductCategoryDropdownItem.js.map