"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BottomReplyContainer = void 0;
var _react = require("react");
var _Avatar = require("./Avatar");
var _native = require("styled-components/native");
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
const ReplyContainer = _native.styled.TouchableOpacity`
  background-color: #ffffff;
  left: ${props => !props.isUser ? '10px' : 'auto'};
  right: ${props => props.isUser ? '10px' : 'auto'};
  padding: 4px 8px 4px 16px;
  border-radius: 20px;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 8px 8px 0;

  ${_reactNative.Platform.select({
  ios: `
      shadow-color: rgba(185, 198, 199, 1);
      shadow-offset: 0px 0px;
      shadow-opacity: 1;
      shadow-radius: 8px;
    `,
  android: `
      elevation: 8;
    `
})}
`;
const AvatarCircle = _native.styled.View`
  height: 24px;
  width: 24px;
  margin-left: -10px;
`;
const CircleCurrent = _native.styled.View`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f0f0f0;
  border-radius: 50%;
  background-color: #ffffff;
`;
const CircleCurrentText = _native.styled.Text`
  color: #8c8c8c;
  font-size: 10px;
  font-weight: 100;
`;
const CounterRepliesText = _native.styled.Text`
  font-size: 12px;
  color: #0052cd;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const BottomReplyContainer = ({
  isUser,
  reply,
  onClick
}) => {
  const uniqueUsers = (0, _react.useMemo)(() => {
    return Object.values(reply.reduce((acc, item) => {
      if (!acc[item.user.id]) {
        acc[item.user.id] = {
          ...item.user
        };
      }
      return acc;
    }, {}));
  }, [reply]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ReplyContainer, {
    onPress: onClick,
    isUser: isUser,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: {
        flexDirection: 'row'
      },
      children: [uniqueUsers.slice(0, 3).map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarCircle, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
          username: item.name,
          style: {
            height: '100%',
            width: '100%',
            borderWidth: 1,
            borderColor: '#F0F0F0',
            borderStyle: 'solid',
            fontSize: 10
          }
        })
      }, item.id)), uniqueUsers.length > 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarCircle, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CircleCurrent, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CircleCurrentText, {
            children: ["+", uniqueUsers.length - 3]
          })
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CounterRepliesText, {
      children: [reply.length, " ", reply.length > 1 ? 'replies' : 'reply']
    })]
  });
};
exports.BottomReplyContainer = BottomReplyContainer;
//# sourceMappingURL=BottomReplyContainer.js.map