import React, {Fragment, useEffect, useRef, useState} from 'react';
import {Text, View} from 'react-native-animatable';
import {ProfilePreview} from '../profile';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
import {Alert, Animated, StyleSheet} from 'react-native';
import ClockIcon from '../../assets/icons/clock-icon-01.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {RectButton, TouchableOpacity} from 'react-native-gesture-handler';
import {
  getTimePosted,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from '../../utils';
import Arrow from '../../assets/icons/back-arrow-colored.svg';
import Trash from '../../assets/ionicons/trash-outline.svg';
import CommentsContainer from './CommentsContainer';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import {deleteComment} from '../../services';
import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings';
import {min} from 'moment';

/**
 * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
 */

interface CommentTileProps {
  comment_object: CommentType;
  screenType: ScreenType;
  typeOfComment: TypeOfComment;
  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
  newCommentsAvailable: boolean;
  setNewCommentsAvailable: (available: boolean) => void;
  canDelete: boolean;
}

const CommentTile: React.FC<CommentTileProps> = ({
  comment_object,
  screenType,
  typeOfComment,
  setCommentObjectInFocus,
  newCommentsAvailable,
  setNewCommentsAvailable,
  canDelete,
}) => {
  const timePosted = getTimePosted(comment_object.date_created);
  const [showReplies, setShowReplies] = useState<boolean>(false);
  const [newThreadAvailable, setNewThreadAvailable] = useState(true);
  const swipeRef = useRef<Swipeable>(null);
  const isThread = typeOfComment === 'Thread';

  /**
   * Bubbling up, for handling a new comment in a thread.
   */
  useEffect(() => {
    if (newCommentsAvailable) {
      setNewThreadAvailable(true);
    }
  }, [newCommentsAvailable]);

  /**
   * Case : A COMMENT IS IN FOCUS && REPLY SECTION IS HIDDEN
   *     Bring the current comment to focus
   * Case : No COMMENT IS IN FOCUS && REPLY SECTION IS SHOWN
   *     Unfocus comment in focus
   * In any case toggle value of showReplies
   */
  const toggleReplies = () => {
    if (setCommentObjectInFocus) {
      if (!showReplies) {
        setCommentObjectInFocus(comment_object);
      } else {
        setNewThreadAvailable(true);
        setNewCommentsAvailable(true);
        setCommentObjectInFocus(undefined);
      }
    }
    setShowReplies(!showReplies);
  };

  /**
   * Method to compute text to be shown for replies button
   */
  const getRepliesText = () =>
    showReplies
      ? 'Hide'
      : comment_object.replies_count > 0
      ? `Replies (${comment_object.replies_count})`
      : 'Replies';

  const renderRightAction = (text: string, color: string, progress) => {
    const pressHandler = async () => {
      swipeRef.current?.close();
      const success = await deleteComment(comment_object.comment_id, isThread);
      if (success) {
        setNewCommentsAvailable(true);
      } else {
        Alert.alert(ERROR_FAILED_TO_DELETE_COMMENT);
      }
    };
    return (
      <Animated.View>
        <RectButton
          style={[styles.rightAction, {backgroundColor: color}]}
          onPress={pressHandler}>
          <Trash width={normalize(25)} height={normalize(25)} color={'white'} />
          <Text style={styles.actionText}>{text}</Text>
        </RectButton>
      </Animated.View>
    );
  };

  const renderRightActions = (progress) =>
    canDelete ? (
      <View style={styles.swipeActions}>
        {renderRightAction('Delete', '#c42634', progress)}
      </View>
    ) : (
      <Fragment />
    );

  return (
    <Swipeable
      ref={swipeRef}
      renderRightActions={renderRightActions}
      rightThreshold={40}
      friction={2}
      containerStyle={styles.swipableContainer}>
      <View
        style={[styles.container, isThread ? styles.moreMarginWithThread : {}]}>
        <ProfilePreview
          profilePreview={comment_object.commenter}
          previewType={'Comment'}
          screenType={screenType}
        />
        <TouchableOpacity style={styles.body} onPress={toggleReplies}>
          <Text style={styles.comment}>{comment_object.comment}</Text>
          <View style={styles.clockIconAndTime}>
            <ClockIcon style={styles.clockIcon} />
            <Text style={styles.date_time}>{' ' + timePosted}</Text>
            <View style={styles.flexer} />

            {/*** Show replies text only if there are some replies present */}
            {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
              <View style={styles.repliesTextAndIconContainer}>
                <Text style={styles.repliesText}>{getRepliesText()}</Text>
                <Arrow
                  width={12}
                  height={11}
                  color={TAGG_LIGHT_BLUE}
                  style={
                    !showReplies
                      ? styles.repliesDownArrow
                      : styles.repliesUpArrow
                  }
                />
              </View>
            )}
          </View>
        </TouchableOpacity>
      </View>

      {/*** Show replies if toggle state is true */}
      {showReplies && comment_object.replies_count > 0 && (
        <View
          style={{
            height: Math.min(
              SCREEN_HEIGHT / 2.4,
              (SCREEN_HEIGHT / 7.5) * comment_object.replies_count,
            ),
          }}>
          <CommentsContainer
            objectId={comment_object.comment_id}
            screenType={screenType}
            setNewCommentsAvailable={setNewThreadAvailable}
            newCommentsAvailable={newThreadAvailable}
            typeOfComment={'Thread'}
          />
        </View>
      )}
    </Swipeable>
  );
};

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 1,
    borderColor: 'lightgray',
    backgroundColor: 'white',
    flexDirection: 'column',
    flex: 1,
    paddingTop: '3%',
    marginLeft: '7%',
  },
  swipeActions: {
    flexDirection: 'row',
  },
  moreMarginWithThread: {
    marginLeft: '14%',
  },
  body: {
    marginLeft: 56,
  },
  comment: {
    marginBottom: '2%',
    marginRight: '2%',
    top: -5,
  },
  date_time: {
    color: 'gray',
    fontSize: normalize(12),
  },
  clockIcon: {
    width: 12,
    height: 12,
    alignSelf: 'center',
  },
  clockIconAndTime: {
    flexDirection: 'row',
    marginBottom: '3%',
  },
  flexer: {
    flex: 1,
  },
  repliesTextAndIconContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  repliesText: {
    color: TAGG_LIGHT_BLUE,
    fontWeight: '500',
    fontSize: normalize(12),
    marginRight: '5%',
  },
  repliesBody: {
    width: SCREEN_WIDTH,
  },
  repliesDownArrow: {
    transform: [{rotate: '270deg'}],
    marginTop: '7%',
  },
  repliesUpArrow: {
    transform: [{rotate: '90deg'}],
    marginTop: '7%',
  },
  actionText: {
    color: 'white',
    fontSize: normalize(12),
    fontWeight: '500',
    backgroundColor: 'transparent',
    paddingHorizontal: '5%',
    marginTop: '5%',
  },
  rightAction: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
  },
  swipableContainer: {
    backgroundColor: 'white',
  },
});

export default CommentTile;