import { TouchableOpacity, View } from 'react-native';
import Avatar from '../../../../../components/Avatar';
import { Typography } from '../../../../../../core/components/Typography/Typography';
import { BrandBadge } from '../../../../../elements/BrandBadge';
import { Button, BUTTON_SIZE } from '../../../../../components';
import Skeleton from '../../../../../../core/components/Skeleton/Skeleton';
import { useUser } from '../../../../../hooks/objects';
import { usePendingFollowRequest } from '../../../../../hooks/queries/usePendingFollowRequest';
import { useNavigation } from '@react-navigation/native';
import { useBehaviour } from '../../../../../providers/BehaviourProvider';
import { useStyles } from './styles';
export function RequestItem({
  userId
}) {
  var _user$avatar;
  const {
    styles
  } = useStyles();
  const {
    user
  } = useUser({
    userId
  });
  const {
    acceptRequest,
    declineRequest,
    isLoading
  } = usePendingFollowRequest();
  const {
    AmityUserPendingFollowRequestsPageBehavior
  } = useBehaviour();
  const navigation = useNavigation();
  const handlePressUser = () => {
    if (AmityUserPendingFollowRequestsPageBehavior !== null && AmityUserPendingFollowRequestsPageBehavior !== void 0 && AmityUserPendingFollowRequestsPageBehavior.goToUserProfilePage) {
      AmityUserPendingFollowRequestsPageBehavior.goToUserProfilePage({
        userId
      });
    } else {
      navigation.navigate('UserProfile', {
        userId
      });
    }
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    activeOpacity: 0.7,
    style: styles.userContainer,
    onPress: handlePressUser
  }, /*#__PURE__*/React.createElement(Avatar.User, {
    userId: userId,
    imageStyle: styles.avatar,
    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)
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.nameContainer
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
    numberOfLines: 1,
    ellipsizeMode: "tail",
    style: styles.displayName
  }, user === null || user === void 0 ? void 0 : user.displayName), (user === null || user === void 0 ? void 0 : user.isBrand) && /*#__PURE__*/React.createElement(BrandBadge, {
    accessible: true,
    accessibilityLabel: "Brand verified",
    width: 16,
    height: 16
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.buttonsContainer
  }, /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    disabled: isLoading,
    style: styles.button,
    size: BUTTON_SIZE.LARGE,
    onPress: () => acceptRequest(userId, (user === null || user === void 0 ? void 0 : user.displayName) ?? userId)
  }, "Accept"), /*#__PURE__*/React.createElement(Button, {
    type: "secondary",
    disabled: isLoading,
    style: styles.button,
    size: BUTTON_SIZE.LARGE,
    onPress: () => declineRequest(userId)
  }, "Decline")));
}
function RequestItemSkeleton() {
  const {
    styles
  } = useStyles();
  return /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.skeletonContainer
  }, /*#__PURE__*/React.createElement(Skeleton.Circle, {
    width: 40,
    height: 40
  }), /*#__PURE__*/React.createElement(Skeleton.Line, {
    width: 140,
    height: 10
  })));
}
RequestItem.Skeleton = RequestItemSkeleton;
//# sourceMappingURL=RequestItem.js.map