import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import React, { useContext } from "react";
import classNames from "classnames";
import { View } from "@tarojs/components";
import { pxTransform } from "../../utils/taro/px-transform";
import GridContext from "../grid/context";
var defaultProps = {
    text: '',
    columns: 4,
    gap: 9,
    center: true,
    square: true,
    reverse: false,
    direction: 'vertical'
};
export var GridItem = function(props) {
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, style = _ref.style, columns = _ref.columns, index = _ref.index, gap = _ref.gap, square = _ref.square, text = _ref.text, center = _ref.center, reverse = _ref.reverse, direction = _ref.direction, className = _ref.className, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
        "children",
        "style",
        "columns",
        "index",
        "gap",
        "square",
        "text",
        "center",
        "reverse",
        "direction",
        "className",
        "onClick"
    ]);
    var classPrefix = 'nut-grid-item';
    var classes = classNames(classPrefix, className);
    var context = useContext(GridContext);
    var rootStyle = function() {
        var width = "calc(".concat(100 / Number(columns), "% - ").concat(pxTransform(Number(gap) * (Number(columns) - 1) / Number(columns)), ")");
        var styles = _object_spread({
            width: width,
            overflow: 'hidden'
        }, style);
        if (square) {
            styles.paddingTop = width;
        }
        if (gap) {
            if ((index + 1) % Number(columns)) {
                styles.marginRight = pxTransform(typeof gap === 'number' ? gap : parseFloat(gap));
            }
            if (index >= Number(columns)) {
                styles.marginTop = pxTransform(typeof gap === 'number' ? gap : parseFloat(gap));
            }
        } else {
            styles.borderRadius = 0;
        }
        return styles;
    };
    var contentClass = function() {
        var _obj;
        return classNames("".concat(classPrefix, "-content"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content-border"), true), _define_property(_obj, "".concat(classPrefix, "-content-surround"), gap), _define_property(_obj, "".concat(classPrefix, "-content-center"), center), _define_property(_obj, "".concat(classPrefix, "-content-square"), square), _define_property(_obj, "".concat(classPrefix, "-content-reverse"), reverse && direction !== 'horizontal'), _define_property(_obj, "".concat(classPrefix, "-content-").concat(direction), !!direction), _define_property(_obj, "".concat(classPrefix, "-content-horizontal-reverse"), reverse && direction === 'horizontal'), _obj));
    };
    var textClass = function() {
        var _obj;
        return classNames("".concat(classPrefix, "-text"), (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-text-reverse"), reverse && direction !== 'horizontal'), _define_property(_obj, "".concat(classPrefix, "-text-horizontal"), direction === 'horizontal'), _define_property(_obj, "".concat(classPrefix, "-text-horizontal-reverse"), reverse && direction === 'horizontal'), _obj));
    };
    var handleClick = function(e) {
        onClick && onClick(e);
        context.onClick && context.onClick({
            text: text,
            index: index,
            columns: columns,
            gap: gap,
            center: center,
            square: square,
            reverse: reverse,
            direction: direction
        }, index);
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
        className: classes,
        style: rootStyle(),
        onClick: handleClick
    }, /*#__PURE__*/ React.createElement(View, {
        className: contentClass()
    }, children && /*#__PURE__*/ React.createElement(React.Fragment, null, children), text && /*#__PURE__*/ React.createElement(View, {
        className: textClass()
    }, text))));
};
GridItem.displayName = 'NutGridItem';
