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, Linking, Modal, Platform, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
import colors from '../../Styles';
import moment from 'moment/moment';
import ParsedText from 'react-native-parsed-text';
import { groupBy, orderStatus } 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 FileViewer from '../../components/viewFile';
import RNFS from 'react-native-fs';
import AnimatedProgressWheel from 'react-native-progress-wheel';
import uploadProgress from './uploadProgress';
import Image from 'react-native-fast-image';
import VideoViewing from "../../components/videoView/ImageViewing";
import chatStore from "./ChatStore";
import { ViewFileScreen } from "../webview";
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, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center',
      marginVertical: 4,
      marginHorizontal: 16
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, props, /*#__PURE__*/React.createElement(View, {
    style: {
      height: 178,
      width: 290,
      borderRadius: 10,
      overflow: 'hidden',
      backgroundColor: colors.blueBG
    }
  }, /*#__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) {
  const right = props.right;
  const [isPlay, setIsPlay] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [currentTime, setCurrentTime] = useState('00:00');
  let intervalTime = null;
  useEffect(() => {
    return () => {
      if (intervalTime) {
        clearInterval(intervalTime);
      }
    };
  }, []);
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      justifyContent: right ? 'flex-end' : 'flex-start',
      alignItems: 'center',
      marginVertical: 4,
      marginHorizontal: 16
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, props, /*#__PURE__*/React.createElement(View, {
    style: {
      height: 56,
      width: 251,
      borderRadius: 10,
      padding: 12,
      flexDirection: 'row',
      alignItems: 'center',
      overflow: 'hidden',
      backgroundColor: right ? colors.primary : '#F2F2F2'
    }
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => {
      if (!isPlay) {
        play();
      } else {
        pause();
      }
      return;
      try {
        if (isPlay) {
          SoundPlayer.stop();
          setIsPlay(false);
        } else {
          try {
            try {
              SoundPlayer.stop();
              SoundPlayer.unmount();
            } catch (e) {}
            const _onFinishedPlayingSubscription = SoundPlayer.addEventListener('FinishedPlaying', finishedPlaying => {
              console.log('FinishedPlaying', finishedPlaying);
              setIsPlay(false);
              clearInterval(intervalTime);
            });
            const _onFinishedLoadingSubscription = SoundPlayer.addEventListener('FinishedLoading', success => {
              console.log('FinishedLoading', success);

              // setIsLoading(false)
              // setIsPlay(true)
            });

            const _onFinishedLoadingFileSubscription = SoundPlayer.addEventListener('FinishedLoadingFile', success => {
              console.log('FinishedLoadingFile', success);
              setIsLoading(false);
              setIsPlay(false);
            });
            const _onFinishedLoadingURLSubscription = SoundPlayer.addEventListener('FinishedLoadingURL', _ref => {
              let {
                success,
                url
              } = _ref;
              try {
                var _props$item$attachmen, _props$item$attachmen2;
                if (success && (((_props$item$attachmen = props.item.attachmentLocal) === null || _props$item$attachmen === void 0 ? void 0 : _props$item$attachmen.length) > 0 ? props.item.attachmentLocal[0].uri : (_props$item$attachmen2 = props.item.attachments[0]) === null || _props$item$attachmen2 === void 0 ? void 0 : _props$item$attachmen2.url) === url) {
                  setIsLoading(false);
                  setIsPlay(true);
                }
              } catch (e) {
                console.log(e);
              }
            });
          } catch (e) {
            console.log(e);
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    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'
    }
  })), /*#__PURE__*/React.createElement(Image, {
    source: require('../../assets/ic_wave_white.png'),
    style: {
      flex: 1,
      marginHorizontal: 16,
      height: 16,
      resizeMode: 'contain',
      tintColor: right ? 'white' : '#B5B4B8'
    },
    tintColor: right ? 'white' : '#B5B4B8'
  }), /*#__PURE__*/React.createElement(Text, {
    style: {
      textAlign: 'right',
      fontWeight: '500',
      fontSize: 15,
      color: right ? 'white' : colors.neutralText
    }
  }, currentTime))));
};
export const VideoItem = function (props) {
  const [thumbnail, setThumbnail] = useState('');
  const [isPause, setIsPause] = useState(true);
  useEffect(() => {
    const createThumb = async () => {
      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(FastImage, {
    style: props.style,
    source: thumbnail ? {
      uri: thumbnail
    } : {}
  }), !props.url.includes('file://') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/ic_play.png'),
    style: {
      width: 56,
      height: 56,
      position: 'absolute'
    }
  }))), /*#__PURE__*/React.createElement(VideoViewing, {
    source: {
      uri: props.url
    },
    swipeToCloseEnabled: true,
    doubleTapToZoomEnabled: true,
    visible: !isPause,
    onRequestClose: () => setIsPause(true)
  }));
};
const MessageItem = function (props) {
  const item = props.item;
  const right = props.right;
  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: 4,
      marginHorizontal: 16
    }
  }, /*#__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: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 14
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: {
      borderRadius: 10,
      overflow: 'hidden',
      maxWidth: '75%'
    }
  }, item.attachmentLocal && item.attachmentLocal.length > 0 && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      justifyContent: right ? 'flex-end' : 'flex-start'
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, _extends({}, props, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      justifyContent: right ? 'flex-end' : 'flex-start'
    }
  }), item.attachmentLocal.map(File => {
    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, {
        key: attach,
        onPress: () => {
          setImages([{
            uri: attach
          }]);
          setImageVisible(true);
        },
        onLongPress: props.onLongPress
      }, /*#__PURE__*/React.createElement(FastImage, {
        source: {
          uri: attach
        },
        style: {
          backgroundColor: '#F2F2F2',
          borderRadius: 5,
          overflow: 'hidden',
          width: item.attachmentLocal.length === 1 ? 200 : 120,
          height: item.attachmentLocal.length === 1 ? 200 : 120
        },
        LoadingIndicatorComponent: ActivityIndicator
      }), /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: {
          position: 'absolute',
          alignSelf: 'center',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 16,
          top: item.attachmentLocal.length === 1 ? 65 : 35
        }
      }, /*#__PURE__*/React.createElement(AnimatedProgressWheel, {
        size: 30,
        animateFromValue: 0,
        progress: uploadProgress.progress[item.id] ? uploadProgress.progress[item.id] : 0,
        width: 3,
        color: colors.primary,
        backgroundColor: '#FFFFFFA3',
        fullColor: colors.primary
      }), /*#__PURE__*/React.createElement(Image, {
        source: require('../../assets/ic_cancel_upload.png'),
        style: {
          width: 16,
          height: 16,
          position: 'absolute',
          alignSelf: 'center',
          justifySelf: 'center'
        }
      })));
    }
    if (attach.toLowerCase().includes('.mov') || attach.toLowerCase().includes('.mp4')) {
      return /*#__PURE__*/React.createElement(View, null, /*#__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,
          backgroundColor: '#f2f2f2',
          borderRadius: 10,
          marginVertical: 16
        }
      })), /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: {
          position: 'absolute',
          alignSelf: 'center',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 16,
          top: item.attachmentLocal.length === 1 ? 84 : 84
        }
      }, /*#__PURE__*/React.createElement(AnimatedProgressWheel, {
        size: 30,
        animateFromValue: 0,
        progress: uploadProgress.progress[item.id] ? uploadProgress.progress[item.id] : 0,
        width: 3,
        color: colors.primary,
        backgroundColor: '#FFFFFFA3',
        fullColor: colors.primary
      }), /*#__PURE__*/React.createElement(Image, {
        source: require('../../assets/ic_cancel_upload.png'),
        style: {
          width: 16,
          height: 16,
          position: 'absolute',
          alignSelf: 'center',
          justifySelf: 'center'
        }
      })));
    }
    return /*#__PURE__*/React.createElement(View, null);
  }))), item.attachments && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      justifyContent: right ? 'flex-end' : 'flex-start'
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, _extends({}, props, {
    style: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      justifyContent: right ? 'flex-end' : 'flex-start'
    }
  }), item.attachments.map(attach => {
    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 : 120,
          height: item.attachments.length === 1 ? 200 : 120
        },
        key: attach.url,
        onPress: () => {
          setImages([{
            uri: attach.url
          }]);
          setImageVisible(true);
        },
        onLongPress: props.onLongPress
      }, /*#__PURE__*/React.createElement(FastImage, {
        source: {
          uri: attach.url
        },
        style: {
          borderWidth: 0.5,
          borderColor: '#f2f2f2',
          backgroundColor: '#F2F2F2',
          borderRadius: 5,
          overflow: 'hidden',
          width: item.attachments.length === 1 ? 200 : 120,
          height: item.attachments.length === 1 ? 200 : 120
        },
        LoadingIndicatorComponent: ActivityIndicator
      }));
    }
    if (attach.url.toLowerCase().includes('.mov') || attach.url.toLowerCase().includes('.mp4')) {
      return /*#__PURE__*/React.createElement(VideoItem, _extends({}, props, {
        url: attach.url,
        style: {
          backgroundColor: '#F2F2F2',
          borderRadius: 5,
          overflow: 'hidden',
          width: Dimensions.get('window').width * 0.5,
          height: Dimensions.get('window').width * 0.5
        }
      }));
    }
  }))))), /*#__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'
    }
  }, new Date(item.created_at).getFullYear() < new Date().getFullYear() ? moment(item.created_at).format('DD/MM/YYYY') : moment(item.created_at).fromNow().includes('days') ? `${moment(item.created_at).format('DD/MM')}` : moment(item.created_at).fromNow().includes('day') ? `${moment(item.created_at).format('DD/MM')}` : moment(item.created_at).format('HH:mm'))), 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: 4,
      marginHorizontal: 16
    }
  }, /*#__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: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 14
    }
  }), /*#__PURE__*/React.createElement(View, {
    style: {
      maxWidth: '75%'
    }
  }, /*#__PURE__*/React.createElement(ContainChatItem, props, /*#__PURE__*/React.createElement(View, {
    style: {
      backgroundColor: appStore.appId === 'VTPost' ? right ? colors.primary : '#F2F2F2' : right ? colors.bgVTM : '#F2F2F2',
      padding: 12,
      borderRadius: 10,
      borderWidth: right ? 0 : 1,
      borderColor: '#DCE6F0'
    }
  }, /*#__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)), /*#__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: 4,
      marginHorizontal: 16
    }
  }, /*#__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: 24,
      height: 24,
      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 => {
    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.type.includes('pdf') && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_pdf.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), (attach.type.includes('doc') || attach.type.includes('docx')) && /*#__PURE__*/React.createElement(Image, {
      source: require('../../assets/file_doc.png'),
      style: {
        width: 42,
        height: 42,
        resizeMode: 'contain',
        marginRight: 14
      }
    }), (attach.type.includes('xlsx') || attach.type.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.key.replace('conversation/', '')));
  }))))), /*#__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'
    }
  }, new Date(item.created_at).getFullYear() < new Date().getFullYear() ? moment(item.created_at).format('DD/MM/YYYY') : moment(item.created_at).fromNow().includes('days') ? `${moment(item.created_at).format('DD/MM')}` : moment(item.created_at).fromNow().includes('day') ? `${moment(item.created_at).format('DD/MM')}` : moment(item.created_at).format('HH:mm'))), 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;
    }
  } catch (e) {
    console.log(e);
  }
  if (order !== null && order !== void 0 && order.ORDER_NUMBER) {
    var _item$order_info6, _item$order_info7;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        try {
          var _item$order_info4, _item$order_info5;
          Navigation.push(appStore.componentId, {
            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: true
              },
              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_info6 = item.order_info) !== null && _item$order_info6 !== void 0 && _item$order_info6.order_number ? (_item$order_info7 = item.order_info) === null || _item$order_info7 === void 0 ? void 0 : _item$order_info7.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 {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        try {
          var _item$order_info8, _item$order_info9;
          Navigation.push(appStore.componentId, {
            component: {
              id: 'OrderInfomationtScreenID',
              name: 'OrderInfomationtScreen',
              passProps: {
                orderId: (_item$order_info8 = item.order_info) !== null && _item$order_info8 !== void 0 && _item$order_info8.order_number ? (_item$order_info9 = item.order_info) === null || _item$order_info9 === void 0 ? void 0 : _item$order_info9.order_number : order === null || order === void 0 ? void 0 : order.ORDER_NUMBER,
                isSender: true
              },
              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
      }
    }, order === null || order === void 0 ? void 0 : order.ma_phieugui), /*#__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 === 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 === null || order === void 0 ? void 0 : order.receiver_phone), /*#__PURE__*/React.createElement(Text, {
      style: {
        fontWeight: '500',
        fontSize: 15,
        color: colors.neutralText,
        marginTop: 2
      }
    }, productNames)));
  }
};
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;
    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);
    if (find) {
      return find.first_name + ' ' + find.last_name;
    }
    if (user_id.includes('ADMIN')) {
      return 'Admin';
    }
    return user_id;
  }
  render() {
    const right = this.item.sender === appStore.user.type + '_' + appStore.user.user_id;
    let messageView;
    if (this.item.type === 'MESSAGE') {
      messageView = /*#__PURE__*/React.createElement(MessageItem, {
        item: this.props.item,
        right: right
      });
    }
    if (this.item.type === 'CREATED_QUOTE_ORDER' || this.item.type === 'QUOTE_ORDER') {
      messageView = /*#__PURE__*/React.createElement(OrderItem, {
        item: this.props.item,
        right: right
      });
      return messageView;
    }
    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
        }
      }, /*#__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: 16
        }
      }, 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: {
          paddingVertical: 2
        }
      }, 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: {
          paddingVertical: 2
        }
      }, messageView);
    }
  }
}
function ContainChatItem(props) {
  var _props$item5;
  const containerRef = useRef();
  const [showPopover, setShowPopover] = useState(false);
  const [reactions, setReactions] = useState((_props$item5 = props.item) === null || _props$item5 === void 0 ? void 0 : _props$item5.reactions);
  const [reactObject, setReactObject] = useState(new Map());
  const [position, setPosition] = useState({
    width: 0,
    height: 0,
    x: 0,
    y: 0
  });
  useEffect(() => {
    setReactObject(reactions ? groupBy(reactions, react => react.type) : new Map());
  }, [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);
      let is_enable = true;
      const currentReact = reactions.find(r => r.user_id === appStore.user.type + '_' + appStore.user.user_id);
      if ((currentReact === null || currentReact === void 0 ? void 0 : currentReact.type) === react) {
        is_enable = false;
      }
      const response = await services.create().conversationReact({
        is_enable: is_enable,
        reaction_type: react,
        conversation_id: props.item.conversation_id,
        message_id: props.item._id
      });
      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(View, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
    ref: containerRef,
    onPress: () => {
      try {
        if (props.item.type === 'FILE') {
          try {
            Navigation.push(appStore.componentId, {
              component: {
                name: 'ViewFileScreen',
                options: {
                  popGesture: false,
                  bottomTabs: {
                    visible: false
                  },
                  topBar: {
                    visible: false,
                    height: 0
                  }
                },
                passProps: {
                  data: props.item.attachments[0]
                }
              }
            });
          } catch (e) {
            console.log(e);
            Linking.openURL(props.item.attachments[0].url);
          }
        }
        if (props.item.type === 'LOCATION') {
          try {
            var _props$item6, _props$item6$location, _props$item7, _props$item7$location;
            Linking.openURL(createMapLink({
              provider: 'google',
              latitude: (_props$item6 = props.item) === null || _props$item6 === void 0 ? void 0 : (_props$item6$location = _props$item6.location) === null || _props$item6$location === void 0 ? void 0 : _props$item6$location.latitude,
              longitude: (_props$item7 = props.item) === null || _props$item7 === void 0 ? void 0 : (_props$item7$location = _props$item7.location) === null || _props$item7$location === void 0 ? void 0 : _props$item7$location.longitude
            }));
          } catch (e) {
            console.log(e);
          }
        }
      } catch (e) {}
    },
    onLongPress: onLongPress,
    style: [props.style, {
      flexDirection: 'row',
      alignItems: 'center'
    }]
  }, (reactions === null || reactions === void 0 ? void 0 : reactions.length) > 0 && props.right && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      borderColor: 'white'
    }
  }, reactObject.get('LIKE') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_1.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('LOVE') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_2.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('WOW') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_4.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('SAD') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_5.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginRight: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('ANGRY') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_7.png'),
    style: {
      marginRight: 8,
      width: 24,
      height: 24,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  })), props.children !== null && React.Children.map(props.children, child => /*#__PURE__*/React.cloneElement(child != null ? child : /*#__PURE__*/React.createElement(React.Fragment, null), {
    onLongPress
  })), (reactions === null || reactions === void 0 ? void 0 : reactions.length) > 0 && !props.right && /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      borderColor: 'white'
    }
  }, reactObject.get('LIKE') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_1.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginLeft: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('LOVE') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_2.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginLeft: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('WOW') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_4.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginLeft: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('SAD') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_5.png'),
    style: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
      marginLeft: 8
    },
    resizeMode: 'contain'
  }), reactObject.get('ANGRY') && /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_7.png'),
    style: {
      width: 24,
      height: 24,
      marginLeft: 8,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }))), /*#__PURE__*/React.createElement(Modal, {
    reactions: reactions,
    visible: showPopover,
    transparent: true,
    onRequestClose: () => setShowPopover(false),
    backgroundStyle: {
      backgroundColor: 'transparent'
    }
  }, /*#__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: '#0000004c',
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      margin: 10,
      elevation: 1
    }
  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    onPress: () => reaction('LIKE')
  }, /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_1.png'),
    style: {
      width: 30,
      height: 30,
      marginRight: 16,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  })), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    style: {
      marginHorizontal: 8
    },
    onPress: () => reaction('LOVE')
  }, /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_2.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain',
      marginRight: 16
    },
    resizeMode: 'contain'
  })), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    style: {
      marginHorizontal: 8
    },
    onPress: () => reaction('WOW')
  }, /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_4.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain',
      marginRight: 16
    },
    resizeMode: 'contain'
  })), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    style: {
      marginHorizontal: 8
    },
    onPress: () => reaction('SAD')
  }, /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_5.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain',
      marginRight: 16
    },
    resizeMode: 'contain'
  })), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    style: {
      marginHorizontal: 8
    },
    onPress: () => reaction('ANGRY')
  }, /*#__PURE__*/React.createElement(FastImage, {
    source: require('../../assets/emoji_7.png'),
    style: {
      width: 30,
      height: 30,
      resizeMode: 'contain'
    },
    resizeMode: 'contain'
  }))))));
}
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