import './Avatar_11r3oyw.css';
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useMemo } from 'react';
import { styled } from '@linaria/react';
import { cx } from '../../utils/index.js';
import { classes, tokens } from './Avatar.tokens.js';
import { Wrapper, StatusIcon, ExtraContent, ExtraCounter, ExtraBadge, base, Text, Image } from './Avatar.styles.js';
import { base as base$1 } from './variations/_size/base.js';
import { base as base$2 } from './variations/_focused/base.js';
import { base as base$3 } from './variations/_shape/base.js';
import { extraPlacementMap } from './utils/index.js';
import { getInitialsForName } from './utils/getInitialsForName.js';
import { component, mergeConfig } from '../../engines/common.js';
import { indicatorConfig } from '../Indicator/Indicator.js';

var _excluded = ["size", "name", "url", "customText", "status", "className", "focused", "isScalable", "shape", "statusLabels", "hasExtra", "extraPlacement", "type", "counterView", "count", "maxCount", "badgeView", "text", "customColor", "customBackgroundColor", "customBorderRadius", "contentLeft", "contentRight", "pilled"];
var StatusLabelsDefault = {
  active: 'Активен',
  inactive: 'Неактивен'
};
var getAvatarContent = function getAvatarContent(_ref) {
  var customText = _ref.customText,
    customBorderRadius = _ref.customBorderRadius,
    url = _ref.url,
    initials = _ref.initials,
    name = _ref.name;
  if (customText) {
    return /*#__PURE__*/React__default.createElement(Text, null, customText);
  }
  if (url) {
    return /*#__PURE__*/React__default.createElement(Image, {
      src: url,
      alt: name,
      borderRadius: customBorderRadius
    });
  }
  return /*#__PURE__*/React__default.createElement(Text, null, initials);
};
var getAriaLabel = function getAriaLabel(_ref2) {
  var url = _ref2.url,
    name = _ref2.name,
    status = _ref2.status,
    ariaLabelProp = _ref2['aria-label'],
    statusLabels = _ref2.statusLabels;
  if (!url) {
    return;
  }

  // INFO: включаем aria-label чтобы озвучить что на изображении
  var ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
  return status ? "".concat(ariaLabel, ". ").concat(statusLabels[status]) : ariaLabel;
};
var mergedConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
var Indicator = /*#__PURE__*/component(mergedConfig);
var _exp = function _exp() {
  return Indicator;
};
var _exp5 = function _exp5() {
  return function (_ref3) {
    var status = _ref3.status;
    return status === 'active' ? "var(".concat(tokens.statusOnlineColor, ")") : "var(".concat(tokens.statusOfflineColor, ")");
  };
};
var StyledIndicator = /*#__PURE__*/styled(_exp())({
  name: "StyledIndicator",
  "class": "s1l3y6h4",
  propsAsIs: true,
  vars: {
    "s1l3y6h4-0": [/*#__PURE__*/_exp5()]
  }
});
var avatarRoot = function avatarRoot(Root) {
  return /*#__PURE__*/forwardRef(function (props, ref) {
    var avatarSize = props.size,
      name = props.name,
      url = props.url,
      customText = props.customText,
      status = props.status,
      className = props.className,
      _props$focused = props.focused,
      focused = _props$focused === void 0 ? true : _props$focused,
      isScalable = props.isScalable,
      shape = props.shape,
      _props$statusLabels = props.statusLabels,
      statusLabels = _props$statusLabels === void 0 ? StatusLabelsDefault : _props$statusLabels,
      hasExtra = props.hasExtra,
      extraPlacement = props.extraPlacement,
      type = props.type,
      counterView = props.counterView,
      count = props.count,
      maxCount = props.maxCount,
      badgeView = props.badgeView,
      text = props.text,
      customColor = props.customColor,
      customBackgroundColor = props.customBackgroundColor,
      customBorderRadius = props.customBorderRadius,
      contentLeft = props.contentLeft,
      contentRight = props.contentRight,
      pilled = props.pilled,
      rest = _objectWithoutProperties(props, _excluded);
    var counterValue = count || 1;
    var initials = useMemo(function () {
      return getInitialsForName(name);
    }, [name]);
    var ariaLabel = getAriaLabel(_objectSpread2(_objectSpread2({}, props), {}, {
      statusLabels: statusLabels
    }));
    var extraViewProp = type === 'badge' ? {
      badgeView: badgeView
    } : {
      counterView: counterView
    };
    var borderRadius = avatarSize === 'fit' ? customBorderRadius : undefined;
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      ref: ref,
      size: avatarSize,
      shape: shape,
      className: cx(classes.avatarItem, className),
      "aria-label": ariaLabel,
      focused: focused
    }, extraViewProp, rest), /*#__PURE__*/React__default.createElement(Wrapper, {
      isScalable: isScalable,
      borderRadius: borderRadius
    }, getAvatarContent({
      customText: customText,
      url: url,
      initials: initials,
      name: name,
      customBorderRadius: borderRadius
    })), status && /*#__PURE__*/React__default.createElement(StatusIcon, null, /*#__PURE__*/React__default.createElement(StyledIndicator, {
      "aria-label": statusLabels[status],
      status: status
    })), hasExtra && avatarSize !== 'fit' && /*#__PURE__*/React__default.createElement(ExtraContent, {
      className: extraPlacementMap(extraPlacement)
    }, type === 'counter' ? /*#__PURE__*/React__default.createElement(ExtraCounter, {
      view: counterView,
      count: counterValue,
      maxCount: maxCount
    }) : avatarSize !== 's' && /*#__PURE__*/React__default.createElement(ExtraBadge, _extends({
      view: badgeView,
      text: text,
      customColor: customColor,
      customBackgroundColor: customBackgroundColor,
      pilled: pilled,
      maxWidth: "100%"
    }, contentLeft ? {
      contentLeft: contentLeft
    } : {
      contentRight: contentRight
    }))));
  });
};
var avatarConfig = {
  name: 'Avatar',
  tag: 'div',
  layout: avatarRoot,
  base: base,
  variations: {
    size: {
      css: base$1
    },
    focused: {
      css: base$2
    },
    shape: {
      css: base$3
    }
  },
  defaults: {
    size: 'm',
    shape: 'circled'
  }
};

export { avatarConfig, avatarRoot };
