import React__default from 'react';
import ImageRenderer from './ImageRenderer.js';
import Icon, { IconTypes, IconColors } from './Icon.js';
import { u as uuidv4 } from '../uuid-8b344dd2.js';
import 'prop-types';

var pxToNumber = (px => {
  if (typeof px === 'number') {
    return px;
  }
  if (typeof px === 'string') {
    const parsed = Number.parseFloat(px);
    if (!Number.isNaN(parsed)) {
      return parsed;
    }
  }
  return null;
});

const imageRendererClassName = 'sendbird-avatar-img';
const DefaultComponent = _ref => {
  let {
    width,
    height
  } = _ref;
  let iconWidth = pxToNumber(width);
  let iconHeight = pxToNumber(height);
  if (typeof iconWidth === 'number') {
    iconWidth *= 0.575;
  }
  if (typeof iconHeight === 'number') {
    iconHeight *= 0.575;
  }
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-avatar-img--default",
    style: {
      width,
      height
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.USER,
    fillColor: IconColors.CONTENT,
    width: iconWidth,
    height: iconHeight
  }));
};
const _defaultComponent = _ref2 => {
  let {
    width,
    height
  } = _ref2;
  return /*#__PURE__*/React__default.createElement(DefaultComponent, {
    width: width,
    height: height
  });
};
const AvatarInner = _ref3 => {
  let {
    src = '',
    alt = '',
    height,
    width,
    customDefaultComponent
  } = _ref3;
  const defaultComponent = () => customDefaultComponent ? customDefaultComponent({
    width,
    height
  }) : _defaultComponent({
    width,
    height
  });
  if (typeof src === 'string') {
    return /*#__PURE__*/React__default.createElement(ImageRenderer, {
      className: imageRendererClassName,
      url: src,
      height: height,
      width: width,
      alt: alt,
      defaultComponent: defaultComponent
    });
  }
  if (src && src.length) {
    if (src.length === 1) {
      return /*#__PURE__*/React__default.createElement(ImageRenderer, {
        className: imageRendererClassName,
        url: src[0],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      });
    }
    if (src.length === 2) {
      return /*#__PURE__*/React__default.createElement("div", {
        className: "sendbird-avatar--inner__two-child"
      }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
        className: imageRendererClassName,
        url: src[0],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      }), /*#__PURE__*/React__default.createElement(ImageRenderer, {
        className: imageRendererClassName,
        url: src[1],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      }));
    }
    if (src.length === 3) {
      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
        className: "sendbird-avatar--inner__three-child--upper"
      }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
        className: imageRendererClassName,
        url: src[0],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      })), /*#__PURE__*/React__default.createElement("div", {
        className: "sendbird-avatar--inner__three-child--lower"
      }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
        className: imageRendererClassName,
        url: src[1],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      }), /*#__PURE__*/React__default.createElement(ImageRenderer, {
        className: imageRendererClassName,
        url: src[2],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      })));
    }
    return /*#__PURE__*/React__default.createElement("div", {
      className: "sendbird-avatar--inner__four-child"
    }, src.slice(0, 4).map(i => /*#__PURE__*/React__default.createElement(ImageRenderer, {
      className: imageRendererClassName,
      url: i,
      height: height,
      width: width,
      alt: alt,
      key: uuidv4(),
      defaultComponent: defaultComponent
    })));
  }
  // default img
  return /*#__PURE__*/React__default.createElement(ImageRenderer, {
    className: imageRendererClassName,
    url: "",
    height: height,
    width: width,
    alt: alt,
    defaultComponent: defaultComponent
  });
};
function Avatar(_ref4, ref) {
  let {
    className = '',
    src = '',
    alt = '',
    width = '56px',
    height = '56px',
    onClick,
    customDefaultComponent
  } = _ref4;
  return /*#__PURE__*/React__default.createElement("div", {
    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-avatar'].join(' '),
    role: "button",
    ref: ref,
    style: {
      height,
      width
    },
    onClick: onClick,
    onKeyDown: onClick,
    tabIndex: 0
  }, /*#__PURE__*/React__default.createElement(AvatarInner, {
    src: src,
    width: width,
    height: height,
    alt: alt,
    customDefaultComponent: customDefaultComponent
  }));
}
var Avatar$1 = /*#__PURE__*/React__default.forwardRef(Avatar);

export { AvatarInner, Avatar$1 as default };
//# sourceMappingURL=Avatar.js.map
