import React, {useState} from 'react';
import {Text, View} from 'react-native-animatable';
import {ProfilePreview} from '../profile';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
import {StyleSheet} from 'react-native';
import {
  getTimePosted,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from '../../utils';
import ClockIcon from '../../assets/icons/clock-icon-01.svg';
import {COMMENT_REPLIES} from '../../constants';
import BackIcon from '../../assets/icons/back-arrow-colored.svg';
import {TouchableOpacity} from 'react-native-gesture-handler';
// import CommentsContainer from './CommentsContainer';

/**
 * 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;
}

const CommentTile: React.FC<CommentTileProps> = ({
  comment_object,
  screenType,
  typeOfComment,
}) => {
  const timePosted = getTimePosted(comment_object.date_created);
  const [showReplies, setShowReplies] = useState<boolean>(false);

  const isThread = typeOfComment === 'Thread';

  return (
    <>
      <View style={styles.container}>
        <ProfilePreview
          profilePreview={{
            id: comment_object.commenter.id,
            username: comment_object.commenter.username,
            first_name: comment_object.commenter.first_name,
            last_name: comment_object.commenter.last_name,
          }}
          previewType={'Comment'}
          screenType={screenType}
        />
        <View style={styles.body}>
          <Text style={styles.comment}>{comment_object.comment}</Text>
          <View style={styles.clockIconAndTime}>
            <ClockIcon style={styles.clockIcon} />
            <Text style={styles.date_time}>{' ' + timePosted}</Text>
            {typeOfComment === 'Comment' && (
              <>
                <TouchableOpacity
                  onPress={() => {
                    setShowReplies(!showReplies);
                  }}>
                  <View style={styles.repliesTextAndIconContainer}>
                    <Text style={styles.repliesText}>
                      {showReplies ? 'Hide' : 'Replies'}
                    </Text>
                    <BackIcon
                      width={12}
                      height={11}
                      color={COMMENT_REPLIES}
                      style={
                        !showReplies
                          ? styles.repliesDownArrow
                          : styles.repliesUpArrow
                      }
                    />
                  </View>
                </TouchableOpacity>
              </>
            )}
          </View>
        </View>
      </View>
      {/* {showReplies && (
        <View style={styles.repliesBody}>
          <CommentsContainer
            moment_id={'5a9d6023-bc62-4588-a3dc-8de2c9c370e0'}
            screenType={screenType}
            setNewCommentsAvailable={(value: boolean) => {
              console.log(value);
            }}
            newCommentsAvailable={true}
            typeOfComment={'Thread'}
          />
        </View>
      )} */}
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    marginLeft: '3%',
    marginRight: '3%',
    borderBottomWidth: 1,
    borderColor: 'lightgray',
    marginBottom: '3%',
  },
  body: {
    marginLeft: 56,
  },
  comment: {
    position: 'relative',
    top: -5,
    marginBottom: '2%',
  },
  date_time: {
    color: 'gray',
    fontSize: normalize(12),
  },
  clockIcon: {
    width: 12,
    height: 12,
    alignSelf: 'center',
  },
  clockIconAndTime: {
    flexDirection: 'row',
    marginBottom: '3%',
  },

  repliesTextAndIconContainer: {
    marginLeft: SCREEN_WIDTH * 0.37,
    flexDirection: 'row',
  },

  repliesText: {
    color: COMMENT_REPLIES,
    fontWeight: '500',
    fontSize: normalize(12),
    marginRight: '3%',
  },

  repliesBody: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.8,
  },

  repliesDownArrow: {
    transform: [{rotate: '270deg'}],
    marginTop: '7%',
  },

  repliesUpArrow: {
    transform: [{rotate: '90deg'}],
    marginTop: '7%',
  },
});

export default CommentTile;