"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = require("react");
var _styles = require("./styles");
var _reactNativeModalbox = _interopRequireDefault(require("react-native-modalbox"));
var _hooks = require("../../../../hooks");
var _native = _interopRequireWildcard(require("react-content-loader/native"));
var _reactNativeSvg = require("react-native-svg");
var _xml = require("../../../../../core/assets/icons/xml");
var _native2 = require("@react-navigation/native");
var _assets = require("../../../../../core/assets");
var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
var _number = require("../../../../../core/utils/number");
var _reactNativePaper = require("react-native-paper");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AmityReactionListComponent = ({
  referenceId,
  referenceType,
  isModalVisible,
  onCloseModal,
  onPressUser
}) => {
  const styles = (0, _styles.useStyles)();
  const theme = (0, _reactNativePaper.useTheme)();
  const navigation = (0, _native2.useNavigation)();
  const [reactors, setReactors] = (0, _react.useState)([]);
  const [selectedReactionIndex, setSelectedReactionIndex] = (0, _react.useState)(0);
  const {
    loveReactionList,
    likeReactionList,
    allReactionList,
    loading,
    hasError
  } = (0, _hooks.useReaction)({
    referenceId,
    referenceType
  });
  const SUPPORTED_REACTIONS = (0, _react.useMemo)(() => [allReactionList === null || allReactionList === void 0 ? void 0 : allReactionList.length], [allReactionList]);
  (0, _react.useEffect)(() => {
    (async () => {
      const currentUsers = selectedReactionIndex === 0 ? allReactionList : selectedReactionIndex === 1 ? likeReactionList : selectedReactionIndex === 2 ? loveReactionList : null;
      if ((currentUsers === null || currentUsers === void 0 ? void 0 : currentUsers.length) > 0) {
        const userList = currentUsers.map(item => item.userId);
        try {
          const {
            data
          } = await _tsSdkReactNative.UserRepository.getUserByIds(userList);
          const reactorList = data.map((item, index) => ({
            ...item,
            reactionName: currentUsers[index].reactionName
          }));
          setReactors(reactorList);
        } catch (error) {
          console.log(error);
        }
      } else {
        setReactors([]);
      }
    })();
    return () => {};
  }, [allReactionList, likeReactionList, loveReactionList, selectedReactionIndex]);
  const errorContent = (0, _react.useCallback)(() => {
    return /*#__PURE__*/React.createElement(_reactNative.View, {
      style: styles.errorContainer
    }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
      xml: (0, _xml.fileSearch)(),
      width: 48,
      height: 48
    }), /*#__PURE__*/React.createElement(_reactNative.Text, {
      style: styles.errorTitle
    }, "Sorry, we couldn't show the content"), /*#__PURE__*/React.createElement(_reactNative.Text, {
      style: styles.errorDesc
    }, "Please try again or contact the administator", '\n', "for more information"));
  }, [styles]);
  const renderContentLoading = (0, _react.useCallback)(() => {
    return Array.from({
      length: 8
    }, (_, index) => {
      return /*#__PURE__*/React.createElement(_native.default, {
        key: index,
        height: 70,
        speed: 1,
        width: 380,
        backgroundColor: theme.colors.baseShade4,
        foregroundColor: theme.colors.baseShade2,
        viewBox: "-10 -10 380 70"
      }, /*#__PURE__*/React.createElement(_native.Rect, {
        x: "48",
        y: "8",
        rx: "3",
        ry: "3",
        width: "188",
        height: "6"
      }), /*#__PURE__*/React.createElement(_native.Rect, {
        x: "48",
        y: "26",
        rx: "3",
        ry: "3",
        width: "152",
        height: "6"
      }), /*#__PURE__*/React.createElement(_native.Circle, {
        cx: "20",
        cy: "20",
        r: "20"
      }));
    });
  }, [theme]);
  const onPressReactor = (0, _react.useCallback)(userId => {
    onCloseModal();
    if (onPressUser) {
      onPressUser(userId);
    } else {
      navigation.navigate('UserProfile', {
        userId
      });
    }
  }, [navigation, onCloseModal, onPressUser]);
  const renderReactors = (0, _react.useCallback)(({
    item
  }) => {
    var _item$avatar;
    const avatarUrl = ((_item$avatar = item.avatar) === null || _item$avatar === void 0 ? void 0 : _item$avatar.fileUrl) ?? _assets.defaultAvatarUri;
    const reactionIcon = (0, _xml.likeReaction)();
    // item.reactionName === 'like' ? likeReaction() : loveReaction();
    return /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
      style: styles.rowContainer,
      onPress: () => onPressReactor(item.userId)
    }, /*#__PURE__*/React.createElement(_reactNative.View, {
      style: styles.reactorNameContainer
    }, /*#__PURE__*/React.createElement(_reactNative.Image, {
      source: {
        uri: avatarUrl
      },
      style: styles.avater
    }), /*#__PURE__*/React.createElement(_reactNative.Text, {
      style: styles.userName
    }, item.displayName)), /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
      xml: reactionIcon,
      width: 18,
      height: 18
    }));
  }, [onPressReactor, styles]);
  const reactionHeaderComponent = (0, _react.useCallback)(() => {
    return /*#__PURE__*/React.createElement(_reactNative.View, {
      style: styles.reactionHeaderRow
    }, SUPPORTED_REACTIONS.map((reactionCount, index) => {
      const onSelect = () => {
        setSelectedReactionIndex(index);
      };
      const selectedReactionTextStyle = selectedReactionIndex === index && styles.selectedReaction;
      const selectedReactionBtnStyle = selectedReactionIndex === index && styles.selectedReactionBtn;
      // const allReactiontext = index === 0 && 'All';
      const allReactiontext = index === 0 && (0, _xml.likeReaction)();
      // const reactionIcon = index === 1 ? likeReaction() : loveReaction();
      return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
        onPress: onSelect,
        style: [styles.reactionBtn, selectedReactionBtnStyle],
        key: index
      }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
        xml: allReactiontext,
        width: 18,
        height: 18
      }), /*#__PURE__*/React.createElement(_reactNative.Text, {
        style: [styles.reaction, selectedReactionTextStyle]
      }, (0, _number.formatNumber)(reactionCount)));
    }));
  }, [SUPPORTED_REACTIONS, selectedReactionIndex, styles]);
  const renderReactionList = (0, _react.useCallback)(() => {
    return /*#__PURE__*/React.createElement(_reactNative.FlatList, {
      style: {
        width: '100%'
      },
      data: reactors,
      renderItem: renderReactors,
      keyExtractor: item => item.userId,
      ListHeaderComponent: reactionHeaderComponent
    });
  }, [reactionHeaderComponent, reactors, renderReactors]);
  return /*#__PURE__*/React.createElement(_reactNativeModalbox.default, {
    style: styles.modal,
    isOpen: isModalVisible,
    onClosed: onCloseModal,
    position: "bottom",
    swipeToClose: true,
    swipeArea: 250,
    backButtonClose: true,
    coverScreen: true
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.modalContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.handleBar
  }), loading ? renderContentLoading() : hasError ? errorContent() : reactors ? renderReactionList() : null));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(AmityReactionListComponent);
//# sourceMappingURL=List.js.map