/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var Badge = require('./Badge.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
function addUnit(value) {
    if (value === undefined || value === null) {
        return undefined;
    }
    value = String(value);
    return /^\d+(\.\d+)?$/.test(value) ? "".concat(value, "px") : value;
}
var GridNavItem = function (_a) {
    var _b;
    var children = _a.children, cx = _a.classnames, className = _a.className, style = _a.style, props = tslib.__rest(_a, ["children", "classnames", "className", "style"]);
    var _c = props.index, index = _c === void 0 ? 0 : _c, parent = props.parent;
    if (!parent) {
        if (process.env.NODE_ENV !== 'production') {
            // eslint-disable-next-line no-console
            console.error('[React Vant] <GridNavItem> must be a child component of <GridNav>.');
        }
        return null;
    }
    var rootStyle = React.useMemo(function () {
        var square = parent.square, gutter = parent.gutter, _a = parent.columnNum, columnNum = _a === void 0 ? 4 : _a;
        var percent = "".concat(100 / +columnNum, "%");
        var internalStyle = tslib.__assign(tslib.__assign({}, style), { flexBasis: percent });
        if (square) {
            internalStyle.paddingTop = percent;
        }
        else if (gutter) {
            var gutterValue = addUnit(gutter);
            internalStyle.paddingRight = gutterValue;
            if (index >= columnNum) {
                internalStyle.marginTop = gutterValue;
            }
        }
        return internalStyle;
    }, [parent.style, parent.gutter, parent.columnNum]);
    var contentStyle = React.useMemo(function () {
        var square = parent.square, gutter = parent.gutter;
        if (square && gutter) {
            var gutterValue = addUnit(gutter);
            return tslib.__assign(tslib.__assign({}, props.contentStyle), { right: gutterValue, bottom: gutterValue, height: 'auto' });
        }
        return props.contentStyle;
    }, [parent.gutter, parent.columnNum, props.contentStyle]);
    var renderIcon = function () {
        var ratio = parent.iconRatio || 60;
        if (typeof props.icon === 'string') {
            if (props.badge) {
                return (_J$X_(Badge.Badge, tslib.__assign({}, props.badge),
                    _J$X_("div", { className: cx('GridNavItem-image') },
                        _J$X_("img", { src: props.icon, style: { width: ratio + '%' } }))));
            }
            return (_J$X_("div", { className: cx('GridNavItem-image') },
                _J$X_("img", { src: props.icon, style: { width: ratio + '%' } })));
        }
        if (React__default["default"].isValidElement(props.icon)) {
            return _J$X_(Badge.Badge, tslib.__assign({}, props.badge), props.icon);
        }
        return null;
    };
    var renderText = function () {
        if (React__default["default"].isValidElement(props.text)) {
            return props.text;
        }
        if (props.text) {
            return _J$X_("span", { className: cx('GridNavItem-text') }, props.text);
        }
        return null;
    };
    var renderContent = function () {
        if (children) {
            return children;
        }
        return (_J$X_(React__default["default"].Fragment, null,
            renderIcon(),
            renderText()));
    };
    var center = parent.center, border = parent.border, square = parent.square, gutter = parent.gutter, reverse = parent.reverse, direction = parent.direction;
    var prefix = 'GridNavItem-content';
    var classes = cx("".concat(prefix, " ").concat(props.contentClassName || ''), (_b = {},
        _b["".concat(prefix, "--").concat(direction)] = !!direction,
        _b["".concat(prefix, "--center")] = center,
        _b["".concat(prefix, "--square")] = square,
        _b["".concat(prefix, "--reverse")] = reverse,
        _b["".concat(prefix, "--clickable")] = !!props.onClick,
        _b["".concat(prefix, "--surround")] = border && gutter,
        _b["".concat(prefix, "--border u-hairline")] = border,
        _b));
    return (_J$X_("div", { className: cx(className, { 'GridNavItem--square': square }), style: rootStyle },
        _J$X_("div", { role: props.onClick ? 'button' : undefined, className: classes, style: contentStyle, onClick: props.onClick }, renderContent())));
};
var GridNav = function (_a) {
    var children = _a.children, className = _a.className, cx = _a.classnames, itemClassName = _a.itemClassName, style = _a.style, props = tslib.__rest(_a, ["children", "className", "classnames", "itemClassName", "style"]);
    return (_J$X_("div", { style: tslib.__assign({ paddingLeft: addUnit(props.gutter) }, style), className: cx("GridNav ".concat(className || ''), {
            'GridNav-top u-hairline': props.border && !props.gutter
        }) }, React__default["default"].Children.toArray(children)
        .filter(Boolean)
        .map(function (child, index) {
        return React__default["default"].cloneElement(child, {
            index: index,
            parent: props,
            className: itemClassName,
            classnames: cx
        });
    })));
};
GridNav.defaultProps = {
    direction: 'vertical',
    center: true,
    border: true,
    columnNum: 4
};

exports.GridNavItem = GridNavItem;
exports["default"] = GridNav;
