'use strict';

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

var React = require('react');
var ui_ImageRenderer = require('./ImageRenderer.js');
var ui_Icon = require('./Icon.js');
var uuid = require('../uuid-dee74248.js');
require('prop-types');

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

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

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["default"].createElement("div", {
    className: "sendbird-avatar-img--default",
    style: {
      width,
      height
    }
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.USER,
    fillColor: ui_Icon.IconColors.CONTENT,
    width: iconWidth,
    height: iconHeight
  }));
};
const _defaultComponent = _ref2 => {
  let {
    width,
    height
  } = _ref2;
  return /*#__PURE__*/React__default["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["default"].createElement(ui_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["default"].createElement(ui_ImageRenderer, {
        className: imageRendererClassName,
        url: src[0],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      });
    }
    if (src.length === 2) {
      return /*#__PURE__*/React__default["default"].createElement("div", {
        className: "sendbird-avatar--inner__two-child"
      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
        className: imageRendererClassName,
        url: src[0],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      }), /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
        className: imageRendererClassName,
        url: src[1],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      }));
    }
    if (src.length === 3) {
      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
        className: "sendbird-avatar--inner__three-child--upper"
      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
        className: imageRendererClassName,
        url: src[0],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      })), /*#__PURE__*/React__default["default"].createElement("div", {
        className: "sendbird-avatar--inner__three-child--lower"
      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
        className: imageRendererClassName,
        url: src[1],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      }), /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
        className: imageRendererClassName,
        url: src[2],
        height: height,
        width: width,
        alt: alt,
        defaultComponent: defaultComponent
      })));
    }
    return /*#__PURE__*/React__default["default"].createElement("div", {
      className: "sendbird-avatar--inner__four-child"
    }, src.slice(0, 4).map(i => /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
      className: imageRendererClassName,
      url: i,
      height: height,
      width: width,
      alt: alt,
      key: uuid.uuidv4(),
      defaultComponent: defaultComponent
    })));
  }
  // default img
  return /*#__PURE__*/React__default["default"].createElement(ui_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["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["default"].createElement(AvatarInner, {
    src: src,
    width: width,
    height: height,
    alt: alt,
    customDefaultComponent: customDefaultComponent
  }));
}
var Avatar$1 = /*#__PURE__*/React__default["default"].forwardRef(Avatar);

exports.AvatarInner = AvatarInner;
exports["default"] = Avatar$1;
//# sourceMappingURL=Avatar.js.map
