function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { cloneElement, memo, useEffect, useRef, useState } from 'react';
import appStore from '../AppStore';
import { ActivityIndicator, Dimensions, Image, Linking, Modal, Platform, StyleSheet, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
import colors from '../../Styles';
import moment from 'moment/moment';
import ParsedText from 'react-native-parsed-text';
import { DownloadViewFile, formatDuration, formatTimeLastMessage, groupBy, orderStatus, participantType } from '../../utils';
import { createThumbnail } from '../../components/createThumbnail';
import ImageViewing from '../../components/imageView/ImageViewing';
import FastImage from 'react-native-fast-image';
import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import { toJS } from 'mobx';
import { createMapLink, createOpenLink } from 'react-native-open-maps';
import Popover, { PopoverPlacement } from 'react-native-popover-view';
import services from '../../services';
import { utils } from 'prettier/doc';
import uuid from 'react-native-uuid';
import { observer } from 'mobx-react-lite';
import { Navigation } from 'react-native-navigation';
import SoundPlayer from '../../components/playSound';
import { MText as Text } from '../../components';
import AnimatedProgressWheel from 'react-native-progress-wheel';
import uploadProgress from './uploadProgress';
// import Image from 'react-native-fast-image';
import * as Animatable from 'react-native-animatable';
import VideoViewing from '../../components/videoView/ImageViewing';
import AnimatedSoundBars from '../../components/waveView';
import chatStore from './ChatStore';
import stickerStore from './StickerStore';
var _ = require('lodash');
const MapItem = function (props) {
  var _props$item, _props$item$location, _props$item2, _props$item2$location, _props$item3, _props$item3$location, _props$item4, _props$item4$location;
  const right = props.right;
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center',
      marginVertical: right ? 2.5 : 4,
      marginHorizontal: 10
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, props, /*#__PURE__*/React.createElement(View, {
    style: {
      height: 178,
      width: 290,
      overflow: 'hidden',
      backgroundColor: colors.blueBG,
      borderWidth: right ? 0 : 1,
      borderColor: '#DCE6F0',
      borderRadius: 10
    }
  }, /*#__PURE__*/React.createElement(MapView, {
    zoomEnabled: false,
    zoomTapEnabled: false,
    scrollEnabled: false,
    provider: PROVIDER_GOOGLE // remove if not using Google Maps
    ,
    style: {
      height: 178,
      width: 290,
      borderRadius: 10,
      overflow: 'hidden'
    },
    region: {
      latitude: (_props$item = props.item) === null || _props$item === void 0 ? void 0 : (_props$item$location = _props$item.location) === null || _props$item$location === void 0 ? void 0 : _props$item$location.latitude,
      longitude: (_props$item2 = props.item) === null || _props$item2 === void 0 ? void 0 : (_props$item2$location = _props$item2.location) === null || _props$item2$location === void 0 ? void 0 : _props$item2$location.longitude,
      latitudeDelta: 0.015,
      longitudeDelta: 0.0121
    }
  }, /*#__PURE__*/React.createElement(Marker, {
    coordinate: {
      latitude: (_props$item3 = props.item) === null || _props$item3 === void 0 ? void 0 : (_props$item3$location = _props$item3.location) === null || _props$item3$location === void 0 ? void 0 : _props$item3$location.latitude,
      longitude: (_props$item4 = props.item) === null || _props$item4 === void 0 ? void 0 : (_props$item4$location = _props$item4.location) === null || _props$item4$location === void 0 ? void 0 : _props$item4$location.longitude
    }
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/ic_map_pin.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: "contain"
  })))))));
};
const VoiceItem = function (props) {
  var _props$item$attachmen, _props$item$attachmen2, _props$item$attachmen5;
  const right = props.right;
  const [isPlay, setIsPlay] = useState(false);
  const [showTime, setShowTime] = useState(false);
  const soundbarRef = useRef();
  const [isLoading, setIsLoading] = useState(false);
  const [currentTime, setCurrentTime] = useState(formatDuration(((_props$item$attachmen = props.item.attachmentLocal) === null || _props$item$attachmen === void 0 ? void 0 : _props$item$attachmen.length) > 0 ? props.item.attachmentLocal.length > 0 && props.item.attachmentLocal[0].duration : props.item.attachments.length > 0 && ((_props$item$attachmen2 = props.item.attachments[0]) === null || _props$item$attachmen2 === void 0 ? void 0 : _props$item$attachmen2.duration)));
  let _onFinishedPlayingSubscription = null;
  let _onFinishedLoadingSubscription = null;
  let _onFinishedLoadingFileSubscription = null;
  let _onFinishedLoadingURLSubscription = null;
  useEffect(() => {
    return () => {
      if (chatStore.intervalSound) {
        clearInterval(chatStore.intervalSound);
      }
      if (chatStore.pauseSound) {
        chatStore.pauseSound();
      }
    };
  }, []);
  const play = () => {
    var _props$item$attachmen3, _props$item$attachmen4;
    if (chatStore.pauseSound) {
      chatStore.pauseSound();
    }
    chatStore.pauseSound = pause;
    pause();
    setIsPlay(true);
    SoundPlayer.playUrl(((_props$item$attachmen3 = props.item.attachmentLocal) === null || _props$item$attachmen3 === void 0 ? void 0 : _props$item$attachmen3.length) > 0 ? props.item.attachmentLocal.length > 0 && props.item.attachmentLocal[0].uri : props.item.attachments.length > 0 && ((_props$item$attachmen4 = props.item.attachments[0]) === null || _props$item$attachmen4 === void 0 ? void 0 : _props$item$attachmen4.url));
    chatStore.intervalSound = setInterval(async () => {
      const info = await SoundPlayer.getInfo(); // Also, you need to await this because it is async
      console.log('getInfo', info);
      setCurrentTime(formatDuration(info.currentTime));
    }, 1000);
    _onFinishedPlayingSubscription = SoundPlayer.addEventListener('FinishedPlaying', props => {
      console.log('finished playing', props);
      pause();
      clearInterval(chatStore.intervalSound);
    });
    _onFinishedLoadingSubscription = SoundPlayer.addEventListener('FinishedLoading', _ref => {
      let {
        success
      } = _ref;
      console.log('finished loading', success);
    });
    _onFinishedLoadingFileSubscription = SoundPlayer.addEventListener('FinishedLoadingFile', _ref2 => {
      let {
        success,
        name,
        type
      } = _ref2;
      console.log('finished loading file', success, name, type);
    });
    _onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', _ref3 => {
      let {
        success,
        url
      } = _ref3;
      console.log('finished loading url', success, url);
    });
    console.log('play');
  };
  const pause = () => {
    var _onFinishedPlayingSub, _onFinishedLoadingSub, _onFinishedLoadingURL, _onFinishedLoadingFil;
    SoundPlayer.stop();
    SoundPlayer.unmount();
    clearInterval(chatStore.intervalSound);
    (_onFinishedPlayingSub = _onFinishedPlayingSubscription) === null || _onFinishedPlayingSub === void 0 ? void 0 : _onFinishedPlayingSub.remove();
    (_onFinishedLoadingSub = _onFinishedLoadingSubscription) === null || _onFinishedLoadingSub === void 0 ? void 0 : _onFinishedLoadingSub.remove();
    (_onFinishedLoadingURL = _onFinishedLoadingURLSubscription) === null || _onFinishedLoadingURL === void 0 ? void 0 : _onFinishedLoadingURL.remove();
    (_onFinishedLoadingFil = _onFinishedLoadingFileSubscription) === null || _onFinishedLoadingFil === void 0 ? void 0 : _onFinishedLoadingFil.remove();
    setIsPlay(false);
    console.log('stop');
  };
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center',
      marginVertical: right ? 2.5 : 4,
      marginHorizontal: 10
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, props, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => setShowTime(!showTime),
    style: {
      height: 56,
      width: 251,
      padding: 12,
      flexDirection: 'row',
      alignItems: 'center',
      overflow: 'hidden',
      backgroundColor: right ? colors.primary : '#F2F2F2',
      borderWidth: right ? 0 : 1,
      borderColor: '#DCE6F0',
      borderRadius: 10
    }
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => {
      if (!isPlay) {
        play();
      } else {
        pause();
      }
    },
    style: {
      width: 32,
      height: 32,
      alignItems: 'center',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement(Image, {
    source: isPlay ? require('../../assets/ic_pause.png') : right ? require('../../assets/ic_play.png') : require('../../assets/ic_play_left.png'),
    style: {
      height: 32,
      width: 32,
      resizeMode: 'contain'
    }
  })), isPlay ? /*#__PURE__*/React.createElement(AnimatedSoundBars, {
    isPlay: true,
    id: props.item.attachments.length > 0 && ((_props$item$attachmen5 = props.item.attachments[0]) === null || _props$item$attachmen5 === void 0 ? void 0 : _props$item$attachmen5.url),
    barColor: right ? 'white' : '#44494D66'
  }) : /*#__PURE__*/React.createElement(AnimatedSoundBars, {
    isPlay: false,
    barColor: right ? 'white' : '#44494D66'
  }), /*#__PURE__*/React.createElement(Text, {
    style: {
      width: 55,
      textAlign: 'right',
      fontWeight: '500',
      fontSize: 15,
      color: right ? 'white' : colors.neutralText
    }
  }, currentTime)))), showTime && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '400',
      fontSize: 10,
      color: colors.neutralText,
      marginTop: 4,
      marginHorizontal: 16,
      textAlign: right ? 'right' : 'left'
    }
  }, formatTimeLastMessage(props.item.created_at))));
};
export const VideoItem = function (props) {
  const [thumbnail, setThumbnail] = useState('');
  const [isPause, setIsPause] = useState(true);
  useEffect(() => {
    const createThumb = async () => {
      if (props.thumb_url) {
        setThumbnail(props.thumb_url);
        return;
      }
      try {
        const fileName = props.url.slice(props.url.lastIndexOf('/') + 1, props.url.length);
        const response = await createThumbnail({
          url: props.url,
          format: 'jpeg',
          cacheName: fileName,
          timeStamp: 0
        });
        setThumbnail(response.path);
      } catch (e) {}
    };
    createThumb();
    return () => {
      setIsPause(true);
    };
  }, []);
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: props.style
  }, !thumbnail ? /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: "large"
  }) : /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      alignItems: 'center',
      justifyContent: 'center'
    },
    onPress: () => setIsPause(false),
    onLongPress: props.onLongPress
  }, /*#__PURE__*/React.createElement(Image, {
    style: {
      width: '100%',
      height: '100%',
      resizeMode: 'cover',
      borderRadius: 10,
      overflow: 'hidden'
    },
    source: thumbnail ? {
      uri: thumbnail
    } : {}
  }), !props.url.includes('file://') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/ic_play.png'),
    style: {
      width: 56,
      height: 56,
      position: 'absolute'
    }
  }), /*#__PURE__*/React.createElement(Text, {
    style: {
      position: 'absolute',
      fontSize: 14,
      fontWeight: '500',
      right: 16,
      bottom: 16,
      color: 'white',
      textShadowColor: 'rgba(0, 0, 0, 0.75)',
      textShadowOffset: {
        width: -1,
        height: 1
      },
      textShadowRadius: 2
    }
  }, formatDuration(props.duration)))), /*#__PURE__*/React.createElement(VideoViewing, {
    source: {
      uri: props.url
    },
    swipeToCloseEnabled: true,
    doubleTapToZoomEnabled: true,
    visible: !isPause,
    onRequestClose: () => setIsPause(true)
  }));
};
const MessageItem = function (props) {
  var _item$attachmentLocal, _item$attachments;
  const item = props.item;
  const right = props.right;
  const [showTime, setShowTime] = useState(false);
  const [images, setImages] = useState([]);
  const [imageVisible, setImageVisible] = useState(false);
  const handleUrlPress = (url, matchIndex) => {
    Linking.openURL(url);
  };
  const handlePhonePress = (phone, matchIndex /*: number*/) => {
    // alert(`${phone} has been pressed!`);
  };
  const handleNamePress = (name, matchIndex /*: number*/) => {
    // alert(`Hello ${name}`);
  };
  const handleEmailPress = (email, matchIndex /*: number*/) => {
    // alert(`send email to ${email}`);
  };
  const renderText = (matchingString, matches) => {
    // matches => ["[@michel:5455345]", "@michel", "5455345"]
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    return `^^${match[1]}^^`;
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, item.has_attachment ? /*#__PURE__*/React.createElement(View, {
    style: {
      marginVertical: right ? 2.5 : 4,
      marginHorizontal: 10
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center'
    }
  }, item.status === 'error' && right && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/ic_send_error.png'),
    style: {
      width: 12,
      height: 12,
      resizeMode: 'contain',
      marginRight: 14
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: {
      borderRadius: 10,
      borderTopRightRadius: right && props.bottomMe ? 6 : 10
    }
  }, item.attachmentLocal && item.attachmentLocal.length > 0 && /*#__PURE__*/React.createElement(View, {
    style: {
      maxWidth: ((_item$attachmentLocal = item.attachmentLocal) === null || _item$attachmentLocal === void 0 ? void 0 : _item$attachmentLocal.length) > 1 ? 294 : 200
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, _extends({}, props, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      borderRadius: 10
      // overflow: 'hidden',
    }
  }), item.attachmentLocal.map((File, index) => {
    const attach = File.uri;
    if (attach.toLowerCase().includes('jpg') || attach.toLowerCase().includes('png') || attach.toLowerCase().includes('jpeg') || attach.toLowerCase().includes('heic')) {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: {
          // width: item.attachments.length === 1 ? 200 : 145,
          // height: item.attachments.length === 1 ? 200 : 145,
        },
        key: attach.url,
        onPress: () => {
          setImages([{
            uri: attach
          }]);
          setImageVisible(true);
        },
        onLongPress: props.onLongPress
      }, /*#__PURE__*/React.createElement(Image, {
        source: {
          uri: attach
        },
        style: {
          backgroundColor: '#F2F2F2',
          borderRadius: 5,
          overflow: 'hidden',
          width: item.attachmentLocal.length === 1 ? 200 : 145,
          height: item.attachmentLocal.length === 1 ? 200 : 145,
          marginLeft: item.attachmentLocal.length > 0 ? (index + 1) % 2 === 0 ? 4 : 0 : 0,
          marginTop: item.attachmentLocal.length > 0 ? index > 1 ? 4 : 0 : 0,
          resizeMode: 'cover'
        },
        LoadingIndicatorComponent: ActivityIndicator
      }));
    }
    if (attach.toLowerCase().includes('.mov') || attach.toLowerCase().includes('.mp4')) {
      return /*#__PURE__*/React.createElement(VideoItem, _extends({
        key: attach
      }, props, {
        source: {
          uri: attach
        },
        url: attach,
        resizeMode: 'contain',
        allowsExternalPlayback: true,
        style: {
          width: Dimensions.get('window').width * 0.5,
          height: Dimensions.get('window').width * 0.5,
          borderRadius: 10,
          overflow: 'hidden',
          marginTop: index > 0 ? 4 : 0
        }
      }));
    }
  }))), item.attachments && /*#__PURE__*/React.createElement(View, {
    style: {
      maxWidth: ((_item$attachments = item.attachments) === null || _item$attachments === void 0 ? void 0 : _item$attachments.length) > 1 ? 294 : 200
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, _extends({}, props, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      borderRadius: 10
      // overflow: 'hidden',
    }
  }), item.attachments.map((attach, index) => {
    if (attach.url.toLowerCase().includes('jpg') || attach.url.toLowerCase().includes('png') || attach.url.toLowerCase().includes('jpeg') || attach.url.toLowerCase().includes('heic')) {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: {
          // width: item.attachments.length === 1 ? 200 : 145,
          // height: item.attachments.length === 1 ? 200 : 145,
        },
        key: attach.url,
        onPress: () => {
          setImages([{
            uri: attach.url
          }]);
          setImageVisible(true);
        },
        onLongPress: props.onLongPress
      }, /*#__PURE__*/React.createElement(Image, {
        source: {
          uri: attach.url
        },
        style: {
          borderColor: '#f2f2f2',
          backgroundColor: '#F2F2F2',
          borderRadius: 5,
          overflow: 'hidden',
          width: item.attachments.length === 1 ? 200 : 145,
          height: item.attachments.length === 1 ? 200 : 145,
          marginLeft: item.attachments.length > 0 ? (index + 1) % 2 === 0 ? 4 : 0 : 0,
          marginTop: item.attachments.length > 0 ? index > 1 ? 4 : 0 : 0,
          resizeMode: 'cover'
        },
        LoadingIndicatorComponent: ActivityIndicator
      }));
    }
    if (attach.url.toLowerCase().includes('.mov') || attach.url.toLowerCase().includes('.mp4')) {
      return /*#__PURE__*/React.createElement(VideoItem, _extends({}, props, {
        thumb_url: attach.thumb_url,
        duration: attach.duration,
        url: attach.url,
        style: {
          borderRadius: 10,
          overflow: 'hidden',
          width: Dimensions.get('window').width * 0.5,
          height: Dimensions.get('window').width * 0.5,
          marginTop: index > 0 ? 4 : 0,
          marginBottom: item.attachments.length > 0 && item.attachments.length - index > 1 ? 4 : 0
        }
      }));
    }
  }))))), showTime && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: props.right ? 'flex-end' : 'flex-start',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '400',
      fontSize: 10,
      color: colors.neutralText,
      marginTop: 4,
      textAlign: props.right ? 'right' : 'left'
    }
  }, formatTimeLastMessage(item.created_at))), item.status === 'error' && /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '500',
      fontSize: 15,
      color: colors.primary,
      marginTop: 8,
      textAlign: right ? 'right' : 'left'
    }
  }, appStore.lang.chat.send_error)) : /*#__PURE__*/React.createElement(View, {
    style: {
      marginVertical: right ? 2 : 3,
      marginHorizontal: 10
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center'
    }
  }, item.status === 'error' && right && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/ic_send_error.png'),
    style: {
      width: 12,
      height: 12,
      resizeMode: 'contain',
      marginRight: 14
    }
  }), /*#__PURE__*/React.createElement(ContainChatItem, props, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => setShowTime(!showTime),
    style: {
      backgroundColor: appStore.appId === 'VTPost' ? right ? colors.primary : '#F2F2F2' : right ? colors.bgVTM : '#F2F2F2',
      padding: 12,
      maxWidth: Dimensions.get('window').width * 0.75,
      borderRadius: 10,
      borderWidth: right ? 0 : 1,
      borderColor: '#DCE6F0',
      borderTopRightRadius: right && props.bottomMe ? 6 : 10,
      borderBottomRightRadius: right && props.topMe ? 6 : 10,
      borderTopLeftRadius: !right && !props.topMe ? 6 : 10,
      borderBottomLeftRadius: !right && !props.bottomMe ? 6 : 10
    }
  }, /*#__PURE__*/React.createElement(ParsedText, {
    accessible: true
    // accessibilityActions={[
    //   {name: 'cut', label: 'cut'},
    //   {name: 'copy', label: 'copy'},
    //   {name: 'paste', label: 'paste'},
    // ]}
    // onAccessibilityAction={event => {
    //   switch (event.nativeEvent.actionName) {
    //     case 'cut':
    //       Alert.alert('Alert', 'cut action success');
    //       break;
    //     case 'copy':
    //       Alert.alert('Alert', 'copy action success');
    //       break;
    //     case 'paste':
    //       Alert.alert('Alert', 'paste action success');
    //       break;
    //   }
    // }}
    ,
    style: {
      fontFamily: 'SVN-GilroyMedium',
      fontWeight: '500',
      fontSize: 15,
      lineHeight: 21,
      color: appStore.appId === 'VTPost' ? right ? 'white' : colors.primaryText : colors.primaryText
    },
    parse: [{
      type: 'url',
      style: styles.url,
      onPress: handleUrlPress
    }
    // {type: 'phone', style: styles.phone, onPress: handlePhonePress},
    // {type: 'email', style: styles.email, onPress: handleEmailPress},
    // {pattern: /Bob|David/,              style: styles.name, onPress: handleNamePress},
    // {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: handleNamePress, renderText: renderText},
    // {pattern: /42/,                     style: styles.magicNumber},
    // {pattern: /#(\w+)/, style: styles.hashTag},
    ],

    childrenProps: {
      allowFontScaling: false
    }
  }, item.text)))), item.status === 'sending' && /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '500',
      fontSize: 15,
      color: colors.sending,
      marginTop: 8,
      textAlign: right ? 'right' : 'left'
    }
  }, appStore.lang.chat.sending + '...'), item.status === 'error' && /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '500',
      fontSize: 15,
      color: colors.primary,
      marginTop: 8,
      textAlign: right ? 'right' : 'left'
    }
  }, appStore.lang.chat.send_error), showTime && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '400',
      fontSize: 10,
      color: colors.neutralText,
      marginTop: 4,
      textAlign: right ? 'right' : 'left'
    }
  }, formatTimeLastMessage(item.created_at)))), /*#__PURE__*/React.createElement(ImageViewing, {
    images: images,
    swipeToCloseEnabled: true,
    doubleTapToZoomEnabled: true,
    imageIndex: 0,
    visible: imageVisible,
    onRequestClose: () => setImageVisible(false)
  }));
};
const DocumentItem = function (props) {
  const item = props.item;
  const right = props.right;
  return /*#__PURE__*/React.createElement(React.Fragment, null, item.has_attachment && /*#__PURE__*/React.createElement(View, {
    style: {
      marginVertical: right ? 2.5 : 4,
      marginHorizontal: 10
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center'
    }
  }, item.status === 'error' && right && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/ic_send_error.png'),
    style: {
      width: 12,
      height: 12,
      resizeMode: 'contain',
      marginRight: 14
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: {
      maxWidth: '85%'
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, props, item.attachmentLocal && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      justifyContent: right ? 'flex-end' : 'flex-start'
    }
  }, item.attachmentLocal.map(attach => {
    var _attach$name, _attach$name2, _attach$name3, _attach$name4, _attach$name5;
    return /*#__PURE__*/React.createElement(View, {
      style: {
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#DCE6F0',
        backgroundColor: '#F8F8FA',
        paddingHorizontal: 8,
        paddingVertical: 8,
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%'
      }
    }, ((_attach$name = attach.name) === null || _attach$name === void 0 ? void 0 : _attach$name.includes('pdf')) && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_pdf.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), (((_attach$name2 = attach.name) === null || _attach$name2 === void 0 ? void 0 : _attach$name2.includes('doc')) || ((_attach$name3 = attach.name) === null || _attach$name3 === void 0 ? void 0 : _attach$name3.includes('docx'))) && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_doc.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), (((_attach$name4 = attach.name) === null || _attach$name4 === void 0 ? void 0 : _attach$name4.includes('xlsx')) || ((_attach$name5 = attach.name) === null || _attach$name5 === void 0 ? void 0 : _attach$name5.includes('xls'))) && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_xls.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      numberOfLines: 1,
      style: {
        fontSize: 15,
        color: '#44494D'
      }
    }, attach.name), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontSize: 13,
        color: '#828282',
        marginTop: 5
      }
    }, (attach.size / (1024 * 1024)).toFixed(2), " Mb")));
  })), item.attachments && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      justifyContent: right ? 'flex-end' : 'flex-start'
    }
  }, item.attachments.map(attach => {
    return /*#__PURE__*/React.createElement(View, {
      style: {
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#DCE6F0',
        backgroundColor: '#F8F8FA',
        paddingHorizontal: 8,
        paddingVertical: 8,
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%'
      }
    }, attach.url.includes('pdf') && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_pdf.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), (attach.url.includes('.doc') || attach.url.includes('.docx')) && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_doc.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), (attach.url.includes('.xls') || attach.url.includes('.xlsx')) && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_xls.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), /*#__PURE__*/React.createElement(Text, {
      numberOfLines: 1,
      style: {
        fontSize: 15,
        flex: 1,
        color: '#44494D',
        fontFamily: 'SVN-GilroyMedium',
        fontWeight: '500'
      }
    }, attach.origin_name));
  }))))), item.status === 'error' && /*#__PURE__*/React.createElement(Text, {
    style: {
      fontWeight: '500',
      fontSize: 15,
      color: colors.primary,
      marginTop: 8,
      textAlign: right ? 'right' : 'left'
    }
  }, appStore.lang.chat.send_error)));
};
const OrderItem = function (props) {
  var _item$order_info, _item$order_info2, _item$order_info3;
  const item = props.item;
  const order = (_item$order_info = item.order_info) !== null && _item$order_info !== void 0 && _item$order_info.vtp_order ? (_item$order_info2 = item.order_info) === null || _item$order_info2 === void 0 ? void 0 : _item$order_info2.vtp_order : (_item$order_info3 = item.order_info) === null || _item$order_info3 === void 0 ? void 0 : _item$order_info3.vtm_bill;
  let productNames = '';
  try {
    if (order !== null && order !== void 0 && order.ORDER_NUMBER) {
      if (order.PRODUCT_NAME) {
        productNames = order.PRODUCT_NAME;
      } else {
        productNames = order.LIST_ITEM.map(p => {
          return p.PRODUCT_QUANTITY + 'x' + p.PRODUCT_NAME;
        }).join(' + ');
      }
    } else {
      productNames = order.ten_hang ? order.ten_hang : order.product_name;
    }
  } catch (e) {
    console.log(e);
  }
  if (item.type === 'CREATED_GROUP_QUOTE_ORDER') {
    var _item$order_info7, _item$order_info8, _item$order_info9, _item$order_info9$tra;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        try {
          if (appStore.appId === 'VTPost') {
            var _item$order_info4, _item$order_info5, _item$order_info6, _appStore$user;
            Navigation.pop('OrderInfomationtScreenID');
            Navigation.push('ChatScreen', {
              component: {
                id: 'OrderInfomationtScreenID',
                name: 'OrderInfomationtScreen',
                passProps: {
                  orderId: (_item$order_info4 = item.order_info) !== null && _item$order_info4 !== void 0 && _item$order_info4.order_number ? (_item$order_info5 = item.order_info) === null || _item$order_info5 === void 0 ? void 0 : _item$order_info5.order_number : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER,
                  isSender: ((_item$order_info6 = item.order_info) === null || _item$order_info6 === void 0 ? void 0 : _item$order_info6.sender_phone) !== ((_appStore$user = appStore.user) === null || _appStore$user === void 0 ? void 0 : _appStore$user.phone) ? 4 : 1
                },
                options: {
                  bottomTabs: {
                    visible: false
                  }
                }
              }
            });
          }
        } catch (e) {
          console.log(e);
        }
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        backgroundColor: colors.blueBG,
        padding: 12,
        marginVertical: 8
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: 'row'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        paddingVertical: 5,
        borderRadius: 28,
        backgroundColor: '#EB960A',
        paddingHorizontal: 8,
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 11,
        color: 'white',
        textAlign: 'center'
      },
      numberOfLines: 1
    }, orderStatus(order === null || order === void 0 ? void 0 : order.ORDER_STATUS)))), /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 8,
        flexDirection: 'row',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 13,
        flex: 1,
        color: colors.primaryText
      }
    }, "Th\xF4ng b\xE1o \u0111\u01A1n h\xE0ng"), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 13,
        color: '#E03'
      }
    }, (_item$order_info7 = item.order_info) !== null && _item$order_info7 !== void 0 && _item$order_info7.order_number ? (_item$order_info8 = item.order_info) === null || _item$order_info8 === void 0 ? void 0 : _item$order_info8.order_number : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER)), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '500',
        fontSize: 15,
        color: colors.neutralText,
        marginTop: 8
      }
    }, productNames), /*#__PURE__*/React.createElement(View, {
      style: {
        height: 1,
        backgroundColor: '#EEE',
        marginVertical: 8
      }
    }), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 17,
        color: colors.primaryText
      }
    }, order === null || order === void 0 ? void 0 : order.RECEIVER_FULLNAME, " - ", order === null || order === void 0 ? void 0 : order.RECEIVER_PHONE), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '500',
        fontSize: 15,
        color: colors.neutralText,
        marginTop: 8
      }
    }, (_item$order_info9 = item.order_info) === null || _item$order_info9 === void 0 ? void 0 : (_item$order_info9$tra = _item$order_info9.tracking_order) === null || _item$order_info9$tra === void 0 ? void 0 : _item$order_info9$tra.content)));
  }
  if (order !== null && order !== void 0 && order.ORDER_NUMBER) {
    var _item$order_info13, _item$order_info14;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        try {
          if (appStore.appId === 'VTPost') {
            var _item$order_info10, _item$order_info11, _item$order_info12, _appStore$user2;
            Navigation.pop('OrderInfomationtScreenID');
            Navigation.push('ChatScreen', {
              component: {
                id: 'OrderInfomationtScreenID',
                name: 'OrderInfomationtScreen',
                passProps: {
                  orderId: (_item$order_info10 = item.order_info) !== null && _item$order_info10 !== void 0 && _item$order_info10.order_number ? (_item$order_info11 = item.order_info) === null || _item$order_info11 === void 0 ? void 0 : _item$order_info11.order_number : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER,
                  isSender: ((_item$order_info12 = item.order_info) === null || _item$order_info12 === void 0 ? void 0 : _item$order_info12.sender_phone) !== ((_appStore$user2 = appStore.user) === null || _appStore$user2 === void 0 ? void 0 : _appStore$user2.phone) ? 4 : 1
                },
                options: {
                  bottomTabs: {
                    visible: false
                  }
                }
              }
            });
          }
        } catch (e) {
          console.log(e);
        }
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        backgroundColor: colors.blueBG,
        padding: 12,
        marginVertical: 8
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: 'row'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 16,
        color: colors.primaryText
      }
    }, (_item$order_info13 = item.order_info) !== null && _item$order_info13 !== void 0 && _item$order_info13.order_number ? (_item$order_info14 = item.order_info) === null || _item$order_info14 === void 0 ? void 0 : _item$order_info14.order_number : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER), /*#__PURE__*/React.createElement(View, {
      style: {
        paddingVertical: 5,
        borderRadius: 28,
        backgroundColor: '#EB960A',
        marginHorizontal: 8,
        paddingHorizontal: 8,
        alignItems: 'center',
        justifyContent: 'center',
        maxWidth: Dimensions.get('screen').width / 2
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 11,
        color: 'white',
        textAlign: 'center'
      },
      numberOfLines: 1
    }, orderStatus(order === null || order === void 0 ? void 0 : order.ORDER_STATUS))))), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 17,
        color: colors.primaryText,
        marginTop: 10
      }
    }, order === null || order === void 0 ? void 0 : order.RECEIVER_FULLNAME, " - ", order === null || order === void 0 ? void 0 : order.RECEIVER_PHONE), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '500',
        fontSize: 15,
        color: colors.neutralText,
        marginTop: 2
      }
    }, productNames)));
  } else {
    var _item$order_info18, _item$order_info19;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        try {
          var _item$order_info15, _item$order_info16, _item$order_info17;
          Navigation.push(appStore.componentId, {
            component: {
              id: 'OrderInfomationtScreenID',
              name: 'OrderInfomationtScreen',
              passProps: {
                orderId: (_item$order_info15 = item.order_info) !== null && _item$order_info15 !== void 0 && _item$order_info15.order_number ? (_item$order_info16 = item.order_info) === null || _item$order_info16 === void 0 ? void 0 : _item$order_info16.order_number : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER,
                isSender: ((_item$order_info17 = item.order_info) === null || _item$order_info17 === void 0 ? void 0 : _item$order_info17.type) === 1 ? 4 : 1
              },
              options: {
                bottomTabs: {
                  visible: false
                }
              }
            }
          });
        } catch (e) {
          alert(e);
        }
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        backgroundColor: colors.blueBG,
        padding: 12,
        marginVertical: 8
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: 'row'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 16,
        color: colors.primaryText
      }
    }, (_item$order_info18 = item.order_info) !== null && _item$order_info18 !== void 0 && _item$order_info18.order_number ? (_item$order_info19 = item.order_info) === null || _item$order_info19 === void 0 ? void 0 : _item$order_info19.order_number : order !== null && order !== void 0 && order.ma_phieugui ? order === null || order === void 0 ? void 0 : order.ma_phieugui : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER), /*#__PURE__*/React.createElement(View, {
      style: {
        paddingVertical: 5,
        borderRadius: 28,
        backgroundColor: '#EB960A',
        marginHorizontal: 8,
        paddingHorizontal: 8,
        alignItems: 'center',
        justifyContent: 'center',
        maxWidth: Dimensions.get('screen').width / 2
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 11,
        color: 'white',
        textAlign: 'center'
      },
      numberOfLines: 1
    }, order !== null && order !== void 0 && order.status_name ? order === null || order === void 0 ? void 0 : order.status_name : order === null || order === void 0 ? void 0 : order.trang_thai)))), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '600',
        fontSize: 17,
        color: colors.primaryText,
        marginTop: 10
      }
    }, order !== null && order !== void 0 && order.ten_khnhan ? order === null || order === void 0 ? void 0 : order.ten_khnhan : order.order_sendname ? order.order_sendname : order === null || order === void 0 ? void 0 : order.receiver_fullname, " - ", order !== null && order !== void 0 && order.tel_khnhan ? order === null || order === void 0 ? void 0 : order.tel_khnhan : order.order_sendtel ? order.order_sendtel : order === null || order === void 0 ? void 0 : order.receiver_phone), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '500',
        fontSize: 15,
        color: colors.neutralText,
        marginTop: 2
      }
    }, order.mota_sp ? order.mota_sp : productNames)));
  }
};
const StickerItem = function (props) {
  var _props$item$sticker_i;
  const right = props.right;
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center',
      marginVertical: 4,
      marginHorizontal: 16
    }
  }, /*#__PURE__*/React.createElement(FastImage, {
    source: stickerStore.getStickerImage(((_props$item$sticker_i = props.item.sticker_ids) === null || _props$item$sticker_i === void 0 ? void 0 : _props$item$sticker_i.length) > 0 && props.item.sticker_ids[0]),
    style: {
      width: 86,
      height: 86,
      resizeMode: 'contain'
    }
  }));
};
export class ChatItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: uuid.v4,
      showPopover: false
    };
    this.item = this.props.item;
    this.right = this.item.sender === appStore.user.type + '_' + appStore.user.user_id;
  }
  getFullName(user_id) {
    var _this$props$conversat, _this$props$conversat2, _this$props$conversat3, _this$props$conversat4;
    const find = (_this$props$conversat = this.props.conversation) === null || _this$props$conversat === void 0 ? void 0 : (_this$props$conversat2 = _this$props$conversat.detail_participants) === null || _this$props$conversat2 === void 0 ? void 0 : _this$props$conversat2.find(p => p.full_user_id === user_id);
    const findP = (_this$props$conversat3 = this.props.conversation) === null || _this$props$conversat3 === void 0 ? void 0 : (_this$props$conversat4 = _this$props$conversat3.participants) === null || _this$props$conversat4 === void 0 ? void 0 : _this$props$conversat4.find(p => p.id === user_id);
    if (find) {
      return find.last_name + ' ' + find.first_name + ' - ' + participantType(findP.participant_type);
    }
    if (user_id.includes('ADMIN')) {
      return 'Admin';
    }
    return user_id;
  }
  render() {
    const userIdFull = appStore.user.type + '_' + appStore.user.user_id;
    const right = this.item.sender === userIdFull;
    let topMe = false;
    let bottomMe = false;
    try {
      topMe = this.props.data[this.props.index - 1].sender === this.item.sender && this.props.data[this.props.index - 1].type !== 'QUOTE_ORDER';
    } catch (e) {}
    try {
      bottomMe = this.props.data[this.props.index + 1].sender === this.item.sender && this.props.data[this.props.index + 1].type !== 'QUOTE_ORDER';
    } catch (e) {}
    let dividerDay = null;
    try {
      if (this.props.index > 0 && moment(this.props.data[this.props.index - 1].created_at).startOf('day').diff(moment(this.props.data[this.props.index].created_at).endOf('day'), 'day') > 0) {
        dividerDay = /*#__PURE__*/React.createElement(View, {
          style: {
            width: '100%',
            height: 42,
            paddingHorizontal: 16,
            alignItems: 'center',
            justifyContent: 'center'
          }
        }, /*#__PURE__*/React.createElement(View, {
          style: {
            width: '100%',
            height: 1,
            backgroundColor: '#DCE6F0'
          }
        }), /*#__PURE__*/React.createElement(Text, {
          style: {
            color: '#828282',
            fontSize: 13,
            fontWeight: '500',
            padding: 12,
            backgroundColor: 'white',
            position: 'absolute'
          }
        }, moment(this.props.data[this.props.index - 1].created_at).format('DD/MM')));
      }
    } catch (e) {
      console.log(e);
    }
    let messageView;
    if (this.item.type === 'MESSAGE') {
      messageView = /*#__PURE__*/React.createElement(MessageItem, {
        item: this.props.item,
        topMe: topMe,
        bottomMe: bottomMe,
        right: right
      });
    }
    if (this.item.type === 'CREATED_QUOTE_ORDER' || this.item.type === 'CREATED_GROUP_QUOTE_ORDER' || this.item.type === 'QUOTE_ORDER') {
      messageView = /*#__PURE__*/React.createElement(OrderItem, {
        item: this.props.item,
        right: right
      });
      return messageView;
    }
    if (this.item.type === 'STICKER') {
      messageView = /*#__PURE__*/React.createElement(StickerItem, {
        item: this.props.item,
        right: right
      });
    }
    if (this.item.type === 'LOCATION') {
      messageView = /*#__PURE__*/React.createElement(MapItem, {
        item: this.props.item,
        right: right
      });
    }
    if (this.item.type === 'FILE') {
      messageView = /*#__PURE__*/React.createElement(DocumentItem, {
        item: this.props.item,
        right: right
      });
    }
    if (this.item.type === 'VOICE') {
      messageView = /*#__PURE__*/React.createElement(VoiceItem, {
        item: this.props.item,
        right: right
      });
    }
    if (!right && this.props.conversation.type === 'GROUP') {
      return /*#__PURE__*/React.createElement(View, {
        style: {
          flexDirection: 'row',
          paddingVertical: 4,
          alignItems: 'flex-start'
        }
      }, /*#__PURE__*/React.createElement(Image, {
        source: this.item.sender.includes('VTM') ? require('../../assets/avatar_default.png') : require('../../assets/avatar_default_customer.png'),
        style: {
          width: 32,
          height: 32,
          resizeMode: 'contain',
          marginLeft: 16,
          marginTop: 16
        }
      }), /*#__PURE__*/React.createElement(View, {
        style: {
          flex: 1
        }
      }, /*#__PURE__*/React.createElement(Text, {
        style: {
          color: '#828282',
          fontSize: 13,
          fontWeight: '500',
          marginLeft: 10,
          lineHeight: 18,
          marginBottom: 4
        }
      }, this.getFullName(this.item.sender)), messageView));
    }
    if (right || this.item.type === 'GROUP') {
      var _this$item$read_by, _this$item$read_by2;
      return /*#__PURE__*/React.createElement(View, {
        style: {
          flexDirection: 'column',
          paddingVertical: 2
        }
      }, dividerDay, messageView, ((_this$item$read_by = this.item.read_by) === null || _this$item$read_by === void 0 ? void 0 : _this$item$read_by.length) > 0 && this.props.index === 0 && /*#__PURE__*/React.createElement(View, {
        style: {
          marginHorizontal: 16,
          flexDirection: 'row',
          alignSelf: right ? 'flex-end' : 'flex-start'
        }
      }, (_this$item$read_by2 = this.item.read_by) === null || _this$item$read_by2 === void 0 ? void 0 : _this$item$read_by2.map(item => /*#__PURE__*/React.createElement(React.Fragment, null, item !== appStore.user.type + '_' + appStore.user.user_id && /*#__PURE__*/React.createElement(Image, {
        style: {
          height: 16,
          width: 16,
          resizeMode: 'center',
          marginLeft: 10
        },
        source: item.includes('VTM') ? require('../../assets/avatar_default.png') : require('../../assets/avatar_default_customer.png')
      })))));
    } else {
      return /*#__PURE__*/React.createElement(View, {
        style: {}
      }, dividerDay, messageView);
    }
  }
}
function ContainChatItem(props) {
  var _props$item5, _props$item6, _props$item9, _props$item12, _props$item12$reactio, _props$item13, _props$item14, _props$item15, _props$item16, _props$item17, _props$item18, _props$item19, _props$item20, _props$item21, _props$item22;
  const containerRef = useRef();
  const [showPopover, setShowPopover] = useState(false);
  const [reactObject, setReactObject] = useState((_props$item5 = props.item) !== null && _props$item5 !== void 0 && _props$item5.reactions ? groupBy((_props$item6 = props.item) === null || _props$item6 === void 0 ? void 0 : _props$item6.reactions, react => react.type) : new Map());
  const [position, setPosition] = useState({
    width: 0,
    height: 0,
    x: 0,
    y: 0
  });
  useEffect(() => {
    var _props$item7, _props$item8;
    setReactObject((_props$item7 = props.item) !== null && _props$item7 !== void 0 && _props$item7.reactions ? groupBy((_props$item8 = props.item) === null || _props$item8 === void 0 ? void 0 : _props$item8.reactions, react => react.type) : new Map());
  }, [(_props$item9 = props.item) === null || _props$item9 === void 0 ? void 0 : _props$item9.reactions]);
  const onLongPress = () => {
    if (props.item.type !== 'FILE' && props.item.type !== 'LOCATION') {
      containerRef.current.measure((fx, fy, width, height, px, py) => {
        setPosition({
          width: width,
          height: height,
          x: px,
          y: py
        });
        setShowPopover(true);
      });
    }
  };
  const reaction = async react => {
    try {
      setShowPopover(false);
      const response = await services.create().conversationReact({
        reaction_type: react,
        conversation_id: props.item.conversation_id,
        message_id: props.item._id
      });
      console.log(response);
      if (response.data.status === 200) {
        // if (is_enable) {
        //   setReactions([
        //     {
        //       type: react,
        //       user_id: appStore.user.type + '_' + appStore.user.user_id,
        //     },
        //   ]);
        // } else {
        //   setReactions(
        //     []
        //   );
        // }
      }
    } catch (e) {
      console.log(e);
    }
  };
  function getUrlExtension(url) {
    return url.split(/[#?]/)[0].split('.').pop().trim();
  }
  return /*#__PURE__*/React.createElement(TouchableHighlight, {
    underlayColor: "white",
    delayLongPress: 300,
    ref: containerRef,
    onPress: () => {
      try {
        if (props.item.type === 'FILE') {
          var _props$item$attachmen6;
          DownloadViewFile(((_props$item$attachmen6 = props.item.attachments) === null || _props$item$attachmen6 === void 0 ? void 0 : _props$item$attachmen6.length) > 0 && props.item.attachments[0].url);
        }
        if (props.item.type === 'LOCATION') {
          try {
            var _props$item10, _props$item10$locatio, _props$item11, _props$item11$locatio;
            Linking.openURL(createMapLink({
              provider: 'google',
              // latitude: props.item?.location?.latitude,
              // longitude: props.item?.location?.longitude,
              query: ((_props$item10 = props.item) === null || _props$item10 === void 0 ? void 0 : (_props$item10$locatio = _props$item10.location) === null || _props$item10$locatio === void 0 ? void 0 : _props$item10$locatio.latitude) + ',' + ((_props$item11 = props.item) === null || _props$item11 === void 0 ? void 0 : (_props$item11$locatio = _props$item11.location) === null || _props$item11$locatio === void 0 ? void 0 : _props$item11$locatio.longitude)
            }));
          } catch (e) {
            console.log(e);
          }
        }
      } catch (e) {}
    },
    onLongPress: onLongPress
  }, /*#__PURE__*/React.createElement(View, {
    style: [{}]
  }, /*#__PURE__*/React.createElement(View, {
    style: [props.style, {
      overflow: 'hidden',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: props.right ? 'flex-end' : 'flex-start'
    }]
  }, props.children !== null && React.Children.map(props.children, child => /*#__PURE__*/React.cloneElement(child != null ? child : /*#__PURE__*/React.createElement(React.Fragment, null), {
    onLongPress
  }))), ((_props$item12 = props.item) === null || _props$item12 === void 0 ? void 0 : (_props$item12$reactio = _props$item12.reactions) === null || _props$item12$reactio === void 0 ? void 0 : _props$item12$reactio.length) > 0 && /*#__PURE__*/React.createElement(View, {
    style: [{
      flexDirection: 'row',
      borderColor: 'white',
      position: 'absolute'
    }, props.right ? {
      left: ((_props$item13 = props.item) === null || _props$item13 === void 0 ? void 0 : _props$item13.reactions.length) > 0 ? -((_props$item14 = props.item) === null || _props$item14 === void 0 ? void 0 : _props$item14.reactions.length) * 32 : 0,
      top: 10
    } : {
      right: -8 - ((_props$item15 = props.item) === null || _props$item15 === void 0 ? void 0 : _props$item15.reactions.length) * 32,
      top: 10
    }]
  }, reactObject.get('LIKE') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_1.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('LOVE') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_2.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('FLUSHED_FACE') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_3.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('WOW') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_4.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('SAD') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_5.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('LOUDLY_CRYING') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_6.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('ANGRY') && /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_7.png'),
    style: {
      marginRight: 8,
      width: 24,
      height: 24,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  })), /*#__PURE__*/React.createElement(Modal, {
    visible: showPopover,
    transparent: true,
    onRequestClose: () => setShowPopover(false)
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    activeOpacity: 0,
    onPress: () => setShowPopover(false),
    style: {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      flexDirection: 'row',
      paddingVertical: 12,
      top: position.y - 60,
      paddingHorizontal: 16,
      borderRadius: 34,
      backgroundColor: 'white',
      overflow: 'hidden',
      alignSelf: 'center',
      shadowColor: '#0000001a',
      shadowOffset: {
        width: 4,
        height: 16
      },
      shadowOpacity: 1,
      shadowRadius: 8,
      margin: 10,
      elevation: 16
    }
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      alignItems: 'center',
      marginHorizontal: 8
    },
    onPress: () => reaction('LIKE')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_1.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item16 = props.item) === null || _props$item16 === void 0 ? void 0 : _props$item16.reactions, {
    type: 'LIKE',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      marginHorizontal: 8,
      alignItems: 'center'
    },
    onPress: () => reaction('LOVE')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_2.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item17 = props.item) === null || _props$item17 === void 0 ? void 0 : _props$item17.reactions, {
    type: 'LOVE',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      marginHorizontal: 8,
      alignItems: 'center'
    },
    onPress: () => reaction('FLUSHED_FACE')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_3.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item18 = props.item) === null || _props$item18 === void 0 ? void 0 : _props$item18.reactions, {
    type: 'FLUSHED_FACE',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      marginHorizontal: 8,
      alignItems: 'center'
    },
    onPress: () => reaction('WOW')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_4.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item19 = props.item) === null || _props$item19 === void 0 ? void 0 : _props$item19.reactions, {
    type: 'WOW',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      marginHorizontal: 8,
      alignItems: 'center'
    },
    onPress: () => reaction('SAD')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_5.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item20 = props.item) === null || _props$item20 === void 0 ? void 0 : _props$item20.reactions, {
    type: 'SAD',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      marginHorizontal: 8,
      alignItems: 'center'
    },
    onPress: () => reaction('LOUDLY_CRYING')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_6.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item21 = props.item) === null || _props$item21 === void 0 ? void 0 : _props$item21.reactions, {
    type: 'LOUDLY_CRYING',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: {
      marginHorizontal: 8,
      alignItems: 'center'
    },
    onPress: () => reaction('ANGRY')
  }, /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/emoji_7.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }), _.findIndex((_props$item22 = props.item) === null || _props$item22 === void 0 ? void 0 : _props$item22.reactions, {
    type: 'ANGRY',
    user_id: appStore.user.type + '_' + appStore.user.user_id
  }) !== -1 && /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: -9,
      width: 6,
      height: 6,
      marginTop: 3,
      borderRadius: 3,
      backgroundColor: colors.primary
    }
  })))))));
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey'
  },
  url: {
    textDecorationLine: 'underline'
  },
  email: {
    textDecorationLine: 'underline'
  },
  phone: {
    textDecorationLine: 'underline'
  },
  name: {},
  username: {
    fontWeight: 'bold'
  },
  magicNumber: {
    // fontSize: 42,
  },
  hashTag: {
    fontStyle: 'italic'
  }
});
//# sourceMappingURL=Item.js.map