"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Header = Header;
exports.HeaderSkeleton = HeaderSkeleton;
var _reactNative = require("react-native");
var _Avatar = _interopRequireDefault(require("../../../../../components/Avatar"));
var _BrandBadge = require("../../../../../elements/BrandBadge");
var _Typography = require("../../../../../../core/components/Typography/Typography");
var _react = require("react");
var _useHeader = require("./hooks/useHeader");
var _types = require("../../../../../types");
var _Skeleton = _interopRequireDefault(require("../../../../../../core/components/Skeleton/Skeleton"));
var _styles = require("./styles");
var _elements = require("../../elements");
var _MenuAction = _interopRequireDefault(require("../../../../../elements/MenuAction"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function Header({
  user,
  inline
}) {
  var _user$avatar;
  const [descriptionExpanded, setDescriptionExpanded] = (0, _react.useState)(false);
  const [truncatedDescription, setTruncatedDescription] = (0, _react.useState)(null);
  (0, _react.useEffect)(() => {
    setDescriptionExpanded(false);
    setTruncatedDescription(null);
  }, [user === null || user === void 0 ? void 0 : user.userId, user === null || user === void 0 ? void 0 : user.description]);
  const onDescriptionTextLayout = lines => {
    if (lines.length <= 4 || truncatedDescription !== null) return;
    const fourthLine = lines[3];
    const avgCharWidth = fourthLine.width / (fourthLine.text.length || 1);
    const seeMorePixelWidth = avgCharWidth * '... see more'.length + 4;
    const charsToRemove = Math.ceil(seeMorePixelWidth / avgCharWidth);
    const firstThreeText = lines.slice(0, 3).map(l => l.text).join('');
    const fourthLineText = fourthLine.text.replace(/\n$/, '');
    const trimmedFourth = fourthLineText.slice(0, -charsToRemove).trimEnd();
    setTruncatedDescription(firstThreeText + trimmedFourth);
  };
  const {
    styles,
    showBadge,
    badgeSize,
    onTextLayout,
    badgePosition,
    followerCount,
    followingCount,
    navigateToRelationship,
    isMyProfile,
    isBlockedByMe,
    isFollowing,
    isPending,
    isFollowLoading,
    handleUnblock,
    handleFollow,
    handleUnfollow,
    followingActions,
    openBottomSheet,
    bottomSheetHeight,
    showPendingBanner,
    pendingFollowRequestCount,
    navigateToPendingFollowRequests
  } = (0, _useHeader.useHeader)(user);
  return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.userInfo
  }, /*#__PURE__*/React.createElement(_Avatar.default.User, {
    viewable: true,
    userId: user === null || user === void 0 ? void 0 : user.userId,
    imageStyle: styles.image,
    userName: user === null || user === void 0 ? void 0 : user.displayName,
    uri: (user === null || user === void 0 ? void 0 : user.avatarCustomUrl) ?? (user === null || user === void 0 || (_user$avatar = user.avatar) === null || _user$avatar === void 0 ? void 0 : _user$avatar.fileUrl),
    firstCharFontSize: 24
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.displayNameContainer
  }, /*#__PURE__*/React.createElement(_Typography.Typography.Headline, {
    numberOfLines: 4,
    onTextLayout: onTextLayout
  }, (user === null || user === void 0 ? void 0 : user.displayName) ?? (user === null || user === void 0 ? void 0 : user.userId)), showBadge && badgePosition && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.badge
  }, /*#__PURE__*/React.createElement(_BrandBadge.BrandBadge, {
    width: badgeSize,
    height: badgeSize
  }))), inline && /*#__PURE__*/React.createElement(_elements.Menu, {
    userId: user === null || user === void 0 ? void 0 : user.userId,
    displayName: user === null || user === void 0 ? void 0 : user.displayName
  })), !!(user !== null && user !== void 0 && user.description) && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.descriptionContainer
  }, !descriptionExpanded && truncatedDescription === null && /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: [styles.description, styles.hiddenText],
    onTextLayout: e => onDescriptionTextLayout(e.nativeEvent.lines)
  }, user.description), descriptionExpanded ? /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.description
  }, user.description) : /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.description
  }, truncatedDescription ?? user.description, truncatedDescription !== null && /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.seeMore,
    onPress: () => setDescriptionExpanded(true)
  }, '... see more'))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.followInfoContainer
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => navigateToRelationship(_types.UserRelationshipTab.following)
  }, /*#__PURE__*/React.createElement(_Typography.Typography.BodyBold, null, followingCount, /*#__PURE__*/React.createElement(_Typography.Typography.Caption, {
    style: styles.followInfoLabel
  }, ' ', "following"))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.followInfoDivider
  }), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => navigateToRelationship(_types.UserRelationshipTab.follower)
  }, /*#__PURE__*/React.createElement(_Typography.Typography.BodyBold, null, followerCount, /*#__PURE__*/React.createElement(_Typography.Typography.Caption, {
    style: styles.followInfoLabel
  }, ' ', "followers")))), isBlockedByMe ? /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(_elements.UnblockButton, {
    onPress: handleUnblock
  })) : !isMyProfile && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.buttonContainer
  }, isPending ? /*#__PURE__*/React.createElement(_elements.PendingButton, {
    onPress: handleUnfollow,
    disabled: isFollowLoading
  }) : isFollowing ? /*#__PURE__*/React.createElement(_elements.FollowingButton, {
    disabled: isFollowLoading,
    onPress: () => openBottomSheet({
      height: bottomSheetHeight[followingActions.length],
      content: /*#__PURE__*/React.createElement(_reactNative.View, null, followingActions.map(action => /*#__PURE__*/React.createElement(_MenuAction.default, _extends({
        gap: "small",
        key: action.label
      }, action))))
    })
  }) : /*#__PURE__*/React.createElement(_elements.FollowButton, {
    onPress: handleFollow,
    disabled: isFollowLoading
  })), showPendingBanner && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(_elements.PendingFollowRequestsBanner, {
    count: pendingFollowRequestCount,
    onPress: navigateToPendingFollowRequests
  })));
}
function HeaderSkeleton() {
  const {
    styles
  } = (0, _styles.useStyles)();
  return /*#__PURE__*/React.createElement(_Skeleton.default, null, /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.userInfo
  }, /*#__PURE__*/React.createElement(_Skeleton.default.Circle, {
    width: 56,
    height: 56
  }), /*#__PURE__*/React.createElement(_Skeleton.default.Line, {
    width: 200,
    height: 12
  })), /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.descriptionContainer
  }, /*#__PURE__*/React.createElement(_Skeleton.default.Line, {
    width: 240,
    height: 8,
    bottom: 12
  }), /*#__PURE__*/React.createElement(_Skeleton.default.Line, {
    width: 300,
    height: 8,
    bottom: 12
  })), /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.followInfoContainer
  }, /*#__PURE__*/React.createElement(_Skeleton.default.Line, {
    width: 54,
    height: 12
  }), /*#__PURE__*/React.createElement(_Skeleton.default.Line, {
    width: 54,
    height: 12
  })));
}
Header.Skeleton = HeaderSkeleton;
//# sourceMappingURL=Header.js.map