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); }
import { View, TouchableOpacity, Text } from 'react-native';
import Avatar from '../../../../../components/Avatar';
import { BrandBadge } from '../../../../../elements/BrandBadge';
import { Typography } from '../../../../../../core/components/Typography/Typography';
import { useEffect, useState } from 'react';
import { useHeader } from './hooks/useHeader';
import { UserRelationshipTab } from '../../../../../types';
import Skeleton from '../../../../../../core/components/Skeleton/Skeleton';
import { useStyles } from './styles';
import { UnblockButton, FollowButton, FollowingButton, PendingButton, PendingFollowRequestsBanner } from '../../elements';
import MenuAction from '../../../../../elements/MenuAction';
import { Menu } from '../../elements';
export function Header({
  user,
  inline
}) {
  var _user$avatar;
  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
  const [truncatedDescription, setTruncatedDescription] = useState(null);
  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
  } = useHeader(user);
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: styles.userInfo
  }, /*#__PURE__*/React.createElement(Avatar.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(View, {
    style: styles.displayNameContainer
  }, /*#__PURE__*/React.createElement(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(View, {
    style: styles.badge
  }, /*#__PURE__*/React.createElement(BrandBadge, {
    width: badgeSize,
    height: badgeSize
  }))), inline && /*#__PURE__*/React.createElement(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(View, {
    style: styles.descriptionContainer
  }, !descriptionExpanded && truncatedDescription === null && /*#__PURE__*/React.createElement(Text, {
    style: [styles.description, styles.hiddenText],
    onTextLayout: e => onDescriptionTextLayout(e.nativeEvent.lines)
  }, user.description), descriptionExpanded ? /*#__PURE__*/React.createElement(Text, {
    style: styles.description
  }, user.description) : /*#__PURE__*/React.createElement(Text, {
    style: styles.description
  }, truncatedDescription ?? user.description, truncatedDescription !== null && /*#__PURE__*/React.createElement(Text, {
    style: styles.seeMore,
    onPress: () => setDescriptionExpanded(true)
  }, '... see more'))), /*#__PURE__*/React.createElement(View, {
    style: styles.followInfoContainer
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => navigateToRelationship(UserRelationshipTab.following)
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, null, followingCount, /*#__PURE__*/React.createElement(Typography.Caption, {
    style: styles.followInfoLabel
  }, ' ', "following"))), /*#__PURE__*/React.createElement(View, {
    style: styles.followInfoDivider
  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => navigateToRelationship(UserRelationshipTab.follower)
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, null, followerCount, /*#__PURE__*/React.createElement(Typography.Caption, {
    style: styles.followInfoLabel
  }, ' ', "followers")))), isBlockedByMe ? /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(UnblockButton, {
    onPress: handleUnblock
  })) : !isMyProfile && /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, isPending ? /*#__PURE__*/React.createElement(PendingButton, {
    onPress: handleUnfollow,
    disabled: isFollowLoading
  }) : isFollowing ? /*#__PURE__*/React.createElement(FollowingButton, {
    disabled: isFollowLoading,
    onPress: () => openBottomSheet({
      height: bottomSheetHeight[followingActions.length],
      content: /*#__PURE__*/React.createElement(View, null, followingActions.map(action => /*#__PURE__*/React.createElement(MenuAction, _extends({
        gap: "small",
        key: action.label
      }, action))))
    })
  }) : /*#__PURE__*/React.createElement(FollowButton, {
    onPress: handleFollow,
    disabled: isFollowLoading
  })), showPendingBanner && /*#__PURE__*/React.createElement(View, {
    style: styles.buttonContainer
  }, /*#__PURE__*/React.createElement(PendingFollowRequestsBanner, {
    count: pendingFollowRequestCount,
    onPress: navigateToPendingFollowRequests
  })));
}
export function HeaderSkeleton() {
  const {
    styles
  } = useStyles();
  return /*#__PURE__*/React.createElement(Skeleton, null, /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.userInfo
  }, /*#__PURE__*/React.createElement(Skeleton.Circle, {
    width: 56,
    height: 56
  }), /*#__PURE__*/React.createElement(Skeleton.Line, {
    width: 200,
    height: 12
  })), /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.descriptionContainer
  }, /*#__PURE__*/React.createElement(Skeleton.Line, {
    width: 240,
    height: 8,
    bottom: 12
  }), /*#__PURE__*/React.createElement(Skeleton.Line, {
    width: 300,
    height: 8,
    bottom: 12
  })), /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.followInfoContainer
  }, /*#__PURE__*/React.createElement(Skeleton.Line, {
    width: 54,
    height: 12
  }), /*#__PURE__*/React.createElement(Skeleton.Line, {
    width: 54,
    height: 12
  })));
}
Header.Skeleton = HeaderSkeleton;
//# sourceMappingURL=Header.js.map