import React from 'react';
import {Text, View} from 'react-native-animatable';
import {ProfilePreview} from '../profile';
import {CommentType, ScreenType} from '../../types';
import {StyleSheet} from 'react-native';
import {getTimePosted} from '../../utils';
import ClockIcon from '../../assets/icons/clock-icon-01.svg';

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

const CommentTile: React.FC<CommentTileProps> = ({
  comment_object,
  screenType,
}) => {
  const timePosted = getTimePosted(comment_object.date_time);
  return (
    <View style={styles.container}>
      <ProfilePreview
        profilePreview={{
          id: comment_object.commenter__id,
          username: comment_object.commenter__username,
          first_name: '',
          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>
        </View>
      </View>
    </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',
  },
  clockIcon: {
    width: 12,
    height: 12,
    alignSelf: 'center',
  },
  clockIconAndTime: {
    flexDirection: 'row',
    marginBottom: '3%',
  },
});

export default CommentTile;