import React, { PureComponent } from 'react';
import { View, Linking, TouchableOpacity, StyleSheet, Text } from 'react-native';
import UtilDate from '../../../utils/UtilDate';
import FastImage from 'react-native-fast-image';
import * as _ from 'lodash';
import UtiImage from '../../../utils/UtiImage';
import { SCREEN } from '../../../utils/UtilDeviceInfo';
import ParsedText from 'react-native-parsed-text';
import { ReactionToggleLikeChild } from './ReactionToggleLikeChild';
import { ReactionCommentChild } from './ReactionCommentChild';
import Collapsible from 'react-native-collapsible';
import CommentItemChild from './CommentItemChild';
import localization from '../../../localization';
import { ReactionLabelLikeChild } from './ReactionLabelLikeChild';
import { ReactionLabelCommentChild } from './ReactionLabelCommentChild';
import ModalContent from './ModalContent';
import Modal from 'react-native-modal';
import AppConfig from '../../../AppConfig';
import ModalImageComment from './Modal/ModalImageComment';
import Modalize from 'react-native-modalize';
import ModalContentToggle from '../component/Modal/ModalContentToggle'
export default class CommentItemCustom extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visibleCommentChild: false,
      dataCommentChild: [],
      visibleModal: false,
      isCommentChild:false,
      commentParent:{},
      commentChild:{},
      isModalVisible: false,
      urlViewImage: null,
      visibleLoading: false,
    };
  }

  componentDidMount() {
    const { comment = {} } = this.props;
    this.setState({
      dataCommentChild: ( (comment.latest_children || {}).comment || [] ).reverse()
    });
  }
  _onPressImage = (images) => {
    let image = UtiImage.getUrlImageStream(images);
    this.setState({
      isModalVisible: true,
      urlViewImage: image.uri
    });
  }
  _closeModal = () => {
    this.setState({ visibleModal: false,isCommentChild:false, isModalVisible: false, visibleLoading:false });
  };
  _LoadCommentChild = () => {
    this.setState({
      visibleCommentChild: true
    });
  };
  renderText(matchingString, matches) {
    let pattern = /\[(@[^:]+):([^\]]+)\]/i;
    let match = matchingString.match(pattern);
    match = (match[1] || '').substring(1);
    return `${match}`;
  }
  handleEmailPress(email) {}
  handlePhonePress(phone) {}
  handleUrlPress(url) {
    Linking.openURL(url);
  }
  handleNamePress(name) {}
  _onPressEditComment = comment => {
    const { onPressEditComment } = this.props;
    if (onPressEditComment) {
      onPressEditComment(comment);
    }
  };
  _onPressEditCommentChild =  async (comment,commentChild) => {
    const { onPressEditComment } = this.props;
    if (onPressEditComment) {
      onPressEditComment(comment,true,commentChild);
    }
  };
  /**
   *   1 comment, default ,
   *   2 comment child comment ,
   *   3 comment child comment child
   */
  _onPressChildComment = comment => {
    const { onPressCommentChild } = this.props;
    if (onPressCommentChild) {
      onPressCommentChild(comment, 2);
    }
  };
  _onPressChildParentComment = (comment, commentParent) => {
    const { onPressCommentChildParent } = this.props;
    if (onPressCommentChildParent) {
      onPressCommentChildParent(comment, commentParent, 3);
    }
  };
  _onShowModalCommentChild = (comment, commentParent) => {
    this.setState({
      visibleModal: true,isCommentChild:true,commentParent,commentChild:comment
    },() => {this.forceUpdate()});
  };

  _handlerLongClick = () => {
    this.setState({
      visibleModal: true,isCommentChild:false
    });
  };
  _doReactionDeleteRequest = async idReaction => {
    try {
      const { props = {} } = this.props;
      props.onRemoveReaction(AppConfig.VERB_COMMENT, props.activity, idReaction);

    } catch (e) {}
  };
  _doReactionChildDeleteRequest = async (commentParent,idChildReaction) => {
    try {
      const { onRemoveChildReaction = {} } = this.props;
      if(onRemoveChildReaction){
        onRemoveChildReaction(commentParent, idChildReaction);
      }
    } catch (e) {}
  };

  render() {
    const { comment = {}, props, userIdCurrent ,onShowModallize =() => {}} = this.props;
    let text = _.get(comment.data, 'text', '');
    text = text.trim();
    //show tên người bình luận đầu tiên
    const children_counts = (comment.children_counts || {}).comment || 0;
    let label_children = '';
    if (children_counts > 0 &&
      (comment.latest_children || {}).comment &&
      (comment.latest_children || {}).comment.length > 0
    ) {
      let itemFirst = (comment.latest_children || {}).comment[0] || {};
      label_children = _.get(itemFirst.user, 'data.name');
    }
    //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.viewContainParse}>
                 <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])}
                style={[styles.touchImageComment]}>
                <FastImage
                  style={{
                    width: SCREEN.width - SIZE_IMAGE - 15*3,
                    height:180
                  }}
                  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>
              <ReactionLabelLikeChild {...comment} userIdCurrent={this.props.userIdCurrent} props={props} />
              <ReactionLabelCommentChild {...comment} onPressActivity={this._onPressChildComment} />
              <ReactionLabelLikeChild onShowModallize ={(comment) => onShowModallize(comment)} {...comment} isShowIcon={true} userIdCurrent={this.props.userIdCurrent} props={props} />
            </View>

            {!this.state.visibleCommentChild && children_counts > 0 && (
              <TouchableOpacity onPress={this._LoadCommentChild} style={styles.touchLabelChildren}>
                <Text style={styles.labelChildren}>
                  {label_children}
                  <Text style={styles.labelChildrenSecond}> {localization.t('comment_was_reply')}</Text>
                </Text>
                <Text style={styles.labelChildrenCount}>
                  {children_counts} {localization.t('comment_response')}
                </Text>
              </TouchableOpacity>
            )}
            {this.state.visibleCommentChild && (
              <View style={styles.viewChildren}>
                <Collapsible collapsed={!this.state.visibleCommentChild}>
                  {(this.state.dataCommentChild || []).map((item, index) => {
                    return (
                      <CommentItemChild
                        key={index}
                        userIdCurrent={userIdCurrent}
                        commentParent={comment}
                        onPressReplyChild={this._onPressChildParentComment}
                        comment={item}
                        index={index}
                        onShowModalCommentChild = {this._onShowModalCommentChild}
                      />
                    );
                  })}
                </Collapsible>
              </View>
            )}
          </View>
          {/* <View  style={{flexDirection:'row'}}>
                     <ReactionToggleLikeChild  {...comment} props={props} />
                     <ReactionToggleHeartChild { ...comment} props = {props} />
                     <ReactionCommentChild {...comment} onPressActivity={this._onPressChildComment} />
            </View> */}
        </View>
        <Modal
          onBackdropPress={() => this.setState({ visibleModal: false })}
          isVisible={this.state.visibleModal}
          onSwipeComplete={() => this.setState({ visibleModal: false })}
          style={styles.bottomModal}
        >
          <ModalContent
            isComment={true}
            isCommentChild={this.state.isCommentChild}
            comment={comment}
            commentChild={this.state.commentChild}
            commentParent={this.state.commentParent}
            onPressEdit={this._onPressEditComment}
            onPressEditCommentChild={this._onPressEditCommentChild}
            activity={this.state.activity}
            userId={this.state.userId}
            activityId={this.state.activityId}
            token={this.state.token}
            doReactionDeleteRequest={this._doReactionDeleteRequest}
            doReactionChildDeleteRequest={this._doReactionChildDeleteRequest}
            closeModal={this._closeModal}
          />
        </Modal>

        {/* View Image comment */}
        <ModalImageComment
                comment={comment}
                userId={this.props.userIdCurrent}
                isModalVisible={this.state.isModalVisible}
                urlViewImage={this.state.urlViewImage}
                closeModal={this._closeModal}
                props={props}
        />
      </View>
    );
  }
}
const SIZE_IMAGE = 30;
const styles = StyleSheet.create({
  container: {
    // flexDirection: 'row',
    flex: 1,
    alignItems: 'flex-start',
    paddingTop: 8,
    paddingBottom: 8,
    paddingRight: 15,
    paddingLeft: 15
    // borderBottomColor: '#DADFE3',
    // borderBottomWidth: 1,
  },
  touchImageComment:{
    marginTop:10,
    marginBottom:5,
    marginLeft:SIZE_IMAGE + 15
  },
  viewContain: {
    flex: 1,
    marginHorizontal: 10,
    marginLeft: SIZE_IMAGE + 10
  },
  viewContainParse: {
    marginHorizontal: 10,
    marginLeft: SIZE_IMAGE + 10,
    width: SCREEN.width - SIZE_IMAGE - 20 * 2
  },
  commentText: {
    flex: 1,
    marginLeft: 5,
    paddingTop: 3,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  bottomModal: {
    justifyContent: 'flex-end',
    margin: 0
  },
  commentAuthor: {
    fontWeight: '500',
    fontSize: 15,
    fontFamily: 'SFCompactDisplay-Medium',
    color: 'rgb(34,43,69)'
  },
  viewAuthor: {
    justifyContent: 'center',
    marginLeft: 10,
    flex: 1
  },
  commentContent: {
    fontSize: 14
  },
  commentTime: {
    fontSize: 13,
    color: 'rgb(143,155,179)',
    fontWeight: '500',
    fontStyle: 'normal',
    lineHeight: 16,
    fontFamily: 'SFCompactDisplay-Medium',
    marginBottom: 5
  },
  viewBottom: {
    marginTop: 5,
    flexDirection: 'row'
  },
  viewHeader: {
    // flexDirection: 'row',
    // justifyContent:'space-between',
  },
  imageView: {
    width: SIZE_IMAGE,
    height: SIZE_IMAGE,
    borderRadius: SIZE_IMAGE / 2
  },
  text: {
    fontSize: 15,
    fontFamily: 'SFCompactDisplay-Regular',
    // letterSpacing: 0,
    color: 'rgb(34,43,69)'
  },
  phone: {
    color: 'blue',
    textDecorationLine: 'underline'
  },
  name: {
    color: 'red'
  },

  username: {
    // color: '#157edc',
    // fontWeight: 'bold'
    fontFamily: 'SFCompactDisplay-Bold',
    fontSize: 15,
    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'
  },
  labelChildren: {
    fontFamily: 'SFCompactDisplay-Medium',
    fontSize: 13,
    fontWeight: '500',
    // lineHeight: 16,
    // color: 'rgb(34,43,69)'
    color: '#157edc'
  },
  viewChildren: {
    flex: 1
  },
  touchLabelChildren: {
    minWidth: 36,
    flexDirection: 'row'
  },
  labelChildrenSecond: {
    fontFamily: 'SFCompactDisplay-Medium',
    fontSize: 13,
    fontWeight: '500',
    color: 'rgb(143,155,179)'
  },
  labelChildrenCount: {
    fontFamily: 'SFCompactDisplay-Medium',
    fontSize: 13,
    fontWeight: '500',
    color: 'rgb(143,155,179)',
    marginLeft: 10
  }
});