import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {SimplePostType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import {DateLabel} from '../common';
import TaggPostFooter from './TaggPostFooter';

interface TaggPostProps {
  post: SimplePostType;
}
const TaggPost: React.FC<TaggPostProps> = ({post}) => {
  if (post.media_type === 'photo') {
    // Post with image and footer that shows caption
    return (
      <View style={styles.photoContainer}>
        <View style={styles.image}>
          {post && (
            <Image style={styles.image} source={{uri: post.media_url}} />
          )}
        </View>
        <TaggPostFooter
          // we currently don't have a way to retreive num of likes information
          likes={undefined}
          handle={post.username}
          caption={post.caption || ''}
          timestamp={post.timestamp}
        />
      </View>
    );
  } else {
    // Post with large text
    return (
      <View style={styles.textContianer}>
        <Text style={styles.text}>{post.caption}</Text>
        <DateLabel timestamp={post.timestamp} type={'default'} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  photoContainer: {
    marginBottom: 50,
  },
  image: {
    width: SCREEN_WIDTH,
    height: SCREEN_WIDTH,
    backgroundColor: '#eee',
    marginBottom: 30,
  },
  textContianer: {marginBottom: 50, paddingHorizontal: 10},
  text: {
    marginBottom: 30,
    fontSize: 18,
    color: 'white',
    flexWrap: 'wrap',
  },
});

export default TaggPost;