import { Text, TouchableOpacity, View, Pressable, Image, FlatList } from 'react-native';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useStyles } from './styles';
import Modal from 'react-native-modalbox';
import { useReaction } from '../../../../hooks';
import ContentLoader, { Rect, Circle } from 'react-content-loader/native';
import { SvgXml } from 'react-native-svg';
import { fileSearch, likeReaction
// loveReaction,
} from '../../../../../core/assets/icons/xml';
import { useNavigation } from '@react-navigation/native';
import { defaultAvatarUri } from '../../../../../core/assets';
import { UserRepository } from '@amityco/ts-sdk-react-native';
import { formatNumber } from '../../../../../core/utils/number';
import { useTheme } from 'react-native-paper';
const AmityReactionListComponent = ({
  referenceId,
  referenceType,
  isModalVisible,
  onCloseModal,
  onPressUser
}) => {
  const styles = useStyles();
  const theme = useTheme();
  const navigation = useNavigation();
  const [reactors, setReactors] = useState([]);
  const [selectedReactionIndex, setSelectedReactionIndex] = useState(0);
  const {
    loveReactionList,
    likeReactionList,
    allReactionList,
    loading,
    hasError
  } = useReaction({
    referenceId,
    referenceType
  });
  const SUPPORTED_REACTIONS = useMemo(() => [allReactionList === null || allReactionList === void 0 ? void 0 : allReactionList.length], [allReactionList]);
  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 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 = useCallback(() => {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.errorContainer
    }, /*#__PURE__*/React.createElement(SvgXml, {
      xml: fileSearch(),
      width: 48,
      height: 48
    }), /*#__PURE__*/React.createElement(Text, {
      style: styles.errorTitle
    }, "Sorry, we couldn't show the content"), /*#__PURE__*/React.createElement(Text, {
      style: styles.errorDesc
    }, "Please try again or contact the administator", '\n', "for more information"));
  }, [styles]);
  const renderContentLoading = useCallback(() => {
    return Array.from({
      length: 8
    }, (_, index) => {
      return /*#__PURE__*/React.createElement(ContentLoader, {
        key: index,
        height: 70,
        speed: 1,
        width: 380,
        backgroundColor: theme.colors.baseShade4,
        foregroundColor: theme.colors.baseShade2,
        viewBox: "-10 -10 380 70"
      }, /*#__PURE__*/React.createElement(Rect, {
        x: "48",
        y: "8",
        rx: "3",
        ry: "3",
        width: "188",
        height: "6"
      }), /*#__PURE__*/React.createElement(Rect, {
        x: "48",
        y: "26",
        rx: "3",
        ry: "3",
        width: "152",
        height: "6"
      }), /*#__PURE__*/React.createElement(Circle, {
        cx: "20",
        cy: "20",
        r: "20"
      }));
    });
  }, [theme]);
  const onPressReactor = useCallback(userId => {
    onCloseModal();
    if (onPressUser) {
      onPressUser(userId);
    } else {
      navigation.navigate('UserProfile', {
        userId
      });
    }
  }, [navigation, onCloseModal, onPressUser]);
  const renderReactors = useCallback(({
    item
  }) => {
    var _item$avatar;
    const avatarUrl = ((_item$avatar = item.avatar) === null || _item$avatar === void 0 ? void 0 : _item$avatar.fileUrl) ?? defaultAvatarUri;
    const reactionIcon = likeReaction();
    // item.reactionName === 'like' ? likeReaction() : loveReaction();
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.rowContainer,
      onPress: () => onPressReactor(item.userId)
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.reactorNameContainer
    }, /*#__PURE__*/React.createElement(Image, {
      source: {
        uri: avatarUrl
      },
      style: styles.avater
    }), /*#__PURE__*/React.createElement(Text, {
      style: styles.userName
    }, item.displayName)), /*#__PURE__*/React.createElement(SvgXml, {
      xml: reactionIcon,
      width: 18,
      height: 18
    }));
  }, [onPressReactor, styles]);
  const reactionHeaderComponent = useCallback(() => {
    return /*#__PURE__*/React.createElement(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 && likeReaction();
      // const reactionIcon = index === 1 ? likeReaction() : loveReaction();
      return /*#__PURE__*/React.createElement(Pressable, {
        onPress: onSelect,
        style: [styles.reactionBtn, selectedReactionBtnStyle],
        key: index
      }, /*#__PURE__*/React.createElement(SvgXml, {
        xml: allReactiontext,
        width: 18,
        height: 18
      }), /*#__PURE__*/React.createElement(Text, {
        style: [styles.reaction, selectedReactionTextStyle]
      }, formatNumber(reactionCount)));
    }));
  }, [SUPPORTED_REACTIONS, selectedReactionIndex, styles]);
  const renderReactionList = useCallback(() => {
    return /*#__PURE__*/React.createElement(FlatList, {
      style: {
        width: '100%'
      },
      data: reactors,
      renderItem: renderReactors,
      keyExtractor: item => item.userId,
      ListHeaderComponent: reactionHeaderComponent
    });
  }, [reactionHeaderComponent, reactors, renderReactors]);
  return /*#__PURE__*/React.createElement(Modal, {
    style: styles.modal,
    isOpen: isModalVisible,
    onClosed: onCloseModal,
    position: "bottom",
    swipeToClose: true,
    swipeArea: 250,
    backButtonClose: true,
    coverScreen: true
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.modalContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.handleBar
  }), loading ? renderContentLoading() : hasError ? errorContent() : reactors ? renderReactionList() : null));
};
export default /*#__PURE__*/memo(AmityReactionListComponent);
//# sourceMappingURL=List.js.map