import React, { PureComponent } from 'react';
import { View, StyleSheet, Linking, Text, TouchableOpacity } from 'react-native';
import FastImage from 'react-native-fast-image';
import ParsedText from 'react-native-parsed-text';
import * as _ from 'lodash';
import UtilDate from '../../../utils/UtilDate';
import UtiImage from '../../../utils/UtiImage';
import { SCREEN } from '../../../utils/UtilDeviceInfo';
import localization from '../../../localization';
import ModalImageComment from './Modal/ModalImageComment';

export default class CommentItemChild extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
      urlViewImage: null,
      visibleLoading: false,
    };
  }
  closeModal = () => {
    this.setState({ isModalVisible: false, visibleLoading:false});
  }

  handleUrlPress(url) {
    Linking.openURL(url);
  }
  renderText(matchingString, matches) {
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    match = (match[1] || '').substring(1);
    return `${match}`;
  }
  handleNamePress(name) {}
  handleEmailPress(email) {}
  handlePhonePress(phone) {}
  _handlerLongClick = () => {
      const {onShowModalCommentChild} = this.props;
      if(onShowModalCommentChild){
        const { comment,commentParent } = this.props;
        onShowModalCommentChild(comment,commentParent)
      }
  };
  _onPressImage = (images) => {
      let image = UtiImage.getUrlImageStream(images);
      this.setState({
        isModalVisible: true,
        urlViewImage: image.uri
      });
  }
  render() {
    const { comment, onPressReplyChild = () => {}, commentParent, userIdCurrent } = this.props;
    let text = _.get(comment.data, 'text', '');
    text = text.trim();
    //check quyền xoá comment
    const userIdComment = _.get(comment.user, 'id');
    return (
      <View style={styles.container}>
        <View style={styles.viewHeader}>
          <TouchableOpacity
            disabled={userIdCurrent === userIdComment ? false : true}
            activeOpacity={0.6}
            onLongPress={this._handlerLongClick}
          >
            <View style={{ flexDirection: 'row' }}>
              <FastImage
                style={styles.imageView}
                resizeMode={FastImage.resizeMode.cover}
                source={
                  _.get(comment.user, 'data.profileImage')
                    ? UtiImage.getLink(comment.user.data.profileImage)
                    : require('../../../assets/imgs/accnt_avatar_defaut.png')
                }
              />
              <View style={styles.viewAuthor}>
                <Text style={styles.commentAuthor}>{_.get(comment.user, 'data.name', '')} </Text>
              </View>
            </View>
            {text && text !== '' ? (
              <View style={styles.viewContain}>
                <ParsedText
                  style={styles.text}
                  parse={[
                    { type: 'url', style: styles.url, onPress: this.handleUrlPress },
                    { type: 'email', style: styles.email, onPress: this.handleEmailPress },
                    {
                      pattern: /\[(@[^:]+):([^\]]+)\]/i,
                      style: styles.username,
                      onPress: this.handleNamePress,
                      renderText: this.renderText
                    },
                    { pattern: /#(\w+)/, style: styles.hashTag }
                  ]}
                >
                  {text}
                </ParsedText>
              </View>
            ) : null}
            {(comment.data || {}).images && (comment.data || {}).images.length > 0 && (
              <TouchableOpacity
              onPress={() => this._onPressImage((comment.data || {}).images[0])}
              tyle={[styles.touchImageComment]}>
                <FastImage
                  style={{
                    width: SCREEN.width - SIZE_IMAGE * 2 - 14 * 4,
                    height: 180,
                    marginLeft:SIZE_IMAGE + 10,
                    marginTop:5,
                  }}
                  source={UtiImage.getUrlImageStream((comment.data || {}).images[0])}
                />
              </TouchableOpacity>
            )}
          </TouchableOpacity>
          <View style={styles.viewContain}>
            <View style={styles.viewBottom}>
              <Text style={styles.commentTime}>{UtilDate.humanizeTimestamp(comment.created_at)}</Text>
              <TouchableOpacity
                onPress={() => onPressReplyChild(comment, commentParent)}
                style={styles.touchLabelChildren}
              >
                <Text style={styles.labelChildrenCount}>{localization.t('comment_reply')}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>

        <ModalImageComment
                comment={comment}
                userId={this.props.userId}
                isModalVisible={this.state.isModalVisible}
                urlViewImage={this.state.urlViewImage}
                closeModal={this.closeModal}
                visibleLoading={this.state.visibleLoading}
        />
      </View>
    );
  }
}
const SIZE_IMAGE = 25;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 5
  },
  viewHeader: {},
  imageView: {
    width: SIZE_IMAGE,
    height: SIZE_IMAGE,
    borderRadius: SIZE_IMAGE / 2
  },
  viewContain: {
    flex: 1,
    marginHorizontal: 10,
    marginLeft: SIZE_IMAGE + 10
    // width:SCREEN.width - SIZE_IMAGE * 4,
  },
  touchImageComment:{
    marginTop:10,
    marginBottom:5,
    // marginLeft:SIZE_IMAGE   + 10,
  },
  bottomModal: {
    justifyContent: 'flex-end',
    margin: 0
  },
  viewContainParse: {
    flex: 1,
    marginHorizontal: 10,
    marginLeft: SIZE_IMAGE + 10,
    width: SCREEN.width - SIZE_IMAGE - 20 * 2
  },
  touchLabelChildren: {
    minHeight: 20,
    minWidth: 36,
    marginLeft: SIZE_IMAGE,
    flexDirection: 'row'
  },
  commentAuthor: {
    fontWeight: '500',
    fontSize: 14,
    fontFamily: 'SFCompactDisplay-Medium',
    // marginBottom: 2,
    color: 'rgb(34,43,69)'
    // flex:1,
    // width:SCREEN.width - SIZE_IMAGE * 4,
  },
  viewAuthor: {
    justifyContent: 'center',
    marginLeft: 10,
    flex: 1
  },
  text: {
    fontSize: 14,
    fontFamily: 'SFCompactDisplay-Regular',
    color: 'rgb(34,43,69)',
    width: SCREEN.width - SIZE_IMAGE * 4
  },
  commentTime: {
    fontSize: 13,
    color: 'rgb(143,155,179)',
    fontWeight: '500',
    fontStyle: 'normal',
    lineHeight: 16,
    fontFamily: 'SFCompactDisplay-Medium',
    marginBottom: 5
  },
  viewBottom: {
    marginTop: 5,
    flexDirection: 'row'
    // width:SCREEN.width - SIZE_IMAGE * 4,
  },
  phone: {
    color: 'blue',
    textDecorationLine: 'underline'
  },
  name: {
    color: 'red'
  },

  username: {
    fontFamily: 'SFCompactDisplay-Bold',
    fontSize: 14,
    fontWeight: 'bold',
    color: 'rgb(34,43,69)'
  },

  magicNumber: {
    fontSize: 42,
    color: 'pink'
  },

  hashTag: {
    color: '#157edc',
    fontWeight: 'bold',
    fontStyle: 'italic'
  },
  url: {
    color: 'red',
    textDecorationLine: 'underline'
  },

  email: {
    textDecorationLine: 'underline'
  },
  labelChildrenCount: {
    fontFamily: 'SFCompactDisplay-Medium',
    fontSize: 13,
    fontWeight: '500',
    lineHeight: 16,
    letterSpacing: 0,
    color: 'rgb(143,155,179)',
    marginLeft: 10
  }
});