import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useState, useEffect, useRef, useContext, useCallback } from "react";
import classNames from "classnames";
import { User } from "@nutui/icons-react";
import { AvatarContext } from "../avatargroup/context";
import Image from "../image";
import { ComponentDefaults } from "../../utils/typings";
import AvatarGroup from "../avatargroup";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    size: '',
    shape: 'round',
    icon: '',
    background: '#eee',
    color: '#666',
    fit: 'cover',
    src: '',
    alt: ''
});
var classPrefix = "nut-avatar";
export var Avatar = function(props) {
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, size = _ref.size, shape = _ref.shape, background = _ref.background, color = _ref.color, src = _ref.src, alt = _ref.alt, icon = _ref.icon, fit = _ref.fit, className = _ref.className, style = _ref.style, onClick = _ref.onClick, onError = _ref.onError, rest = _object_without_properties(_ref, [
        "children",
        "size",
        "shape",
        "background",
        "color",
        "src",
        "alt",
        "icon",
        "fit",
        "className",
        "style",
        "onClick",
        "onError"
    ]);
    var _useState // avatarGroup里的avatar的个数
     = _sliced_to_array(useState(0), 2), maxSum = _useState[0], setMaxSum = _useState[1];
    var _useState1 // 是否显示的最大头像个数
     = _sliced_to_array(useState(false), 2), showMax = _useState1[0], setShowMax = _useState1[1];
    var _useState2 = _sliced_to_array(useState(1), 2), avatarIndex = _useState2[0], setAvatarIndex = _useState2[1];
    var avatarRef = useRef(null);
    var parent = useContext(AvatarContext);
    var sizeValue = [
        'large',
        'normal',
        'small'
    ];
    var propAvatarGroup = parent.propAvatarGroup, avatarGroupRef = parent.avatarGroupRef;
    var _obj;
    var classes = classNames((_obj = {}, _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || 'normal'), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape), true), _define_property(_obj, "nut-avatar-".concat((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || 'normal', "-round"), shape === 'round' && true), _obj));
    var cls = classNames(classPrefix, classes, className);
    var styles = _object_spread({
        width: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
        height: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
        backgroundColor: "".concat(background),
        color: color,
        marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : '',
        zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? "".concat(Math.abs(maxSum - avatarIndex)) : ''
    }, style);
    var maxStyles = {
        backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
        color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
    };
    var avatarLength = useCallback(function(children) {
        var _avatarRef_current_dataset, _avatarRef_current;
        for(var i = 0; i < children.length; i++){
            if (children[i] && children[i].classList && children[i].classList[0] === 'nut-avatar') {
                children[i].setAttribute('data-index', i + 1);
            }
        }
        var index = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef_current = avatarRef.current) === null || _avatarRef_current === void 0 ? void 0 : (_avatarRef_current_dataset = _avatarRef_current.dataset) === null || _avatarRef_current_dataset === void 0 ? void 0 : _avatarRef_current_dataset.index);
        var maxCount = (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || children.length;
        setMaxSum(children.length);
        setAvatarIndex(index);
        if (index === children.length && index !== maxCount && children.length > maxCount) {
            setShowMax(true);
        }
    }, [
        propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max
    ]);
    useEffect(function() {
        var avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
        if (avatarChildren) {
            avatarLength(avatarChildren);
        }
    }, [
        avatarLength,
        avatarGroupRef
    ]);
    var errorEvent = function() {
        onError && onError();
    };
    var clickAvatar = function(e) {
        onClick && onClick(e);
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
        className: cls
    }, rest), {
        style: !showMax ? styles : maxStyles,
        onClick: clickAvatar,
        ref: avatarRef
    }), (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && /*#__PURE__*/ React.createElement(React.Fragment, null, src && /*#__PURE__*/ React.createElement(Image, {
        className: "nut-avatar-img",
        src: src,
        alt: alt,
        style: {
            objectFit: fit
        },
        onError: errorEvent
    }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
        className: "".concat(icon.props.className || '', " nut-avatar-icon")
    })) : null, children && /*#__PURE__*/ React.createElement("span", {
        className: "nut-avatar-text"
    }, children), !src && !icon && !children && /*#__PURE__*/ React.createElement(User, {
        className: "nut-avatar-icon"
    })), showMax && /*#__PURE__*/ React.createElement("div", {
        className: "nut-avatar-text"
    }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)))));
};
Avatar.displayName = 'NutAvatar';
Avatar.Group = AvatarGroup;
