/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React, { Component } from 'react';
import {
  Container,
  Card,
  CardItem,
  Text,
  Content,
  Left,
  Thumbnail,
  Body,
  Right,
  Button,
  List,
} from 'native-base';
import { FlatList, View } from 'react-native';
import data from '../../../../Database/star';
import styles from '../instaStyles';
interface FollowProps {
  showImage: boolean;
  rightButt: boolean;
}
const _renderItem = (
  itemObject: any,
  rightButt: boolean,
  showImage: boolean
) => {
  const { item } = itemObject;
  return (
    <Card style={styles.followCardStyle}>
      <CardItem>
        <Left style={styles.leftFlex}>
          <View style={styles.starLeftView}>
            <View style={styles.starLeftViewImage}>
              <Thumbnail source={item.thumbL} style={styles.starLeft} />
            </View>
          </View>
          <Body>
            {item.id === 0 && (
              <Text style={styles.textSize}>
                <Text style={styles.textFontStyle}>{item.follower}</Text>,{' '}
                <Text style={styles.textFontStyle}>{item.follower1}</Text>{' '}
                {item.postLike}
                <Text note style={styles.textSize}>
                  {item.time}
                </Text>
              </Text>
            )}
            {item.id === 2 && (
              <View>
                <Text style={styles.textSize}>
                  <Text style={styles.textFontStyle}>{item.follower}</Text>{' '}
                  liked{' '}
                  <Text style={styles.textFontStyle}>{item.following}</Text>{' '}
                  post.{' '}
                  <Text note style={styles.textSize}>
                    {item.time}
                  </Text>
                </Text>
              </View>
            )}
            {item.id === 1 && (
              <View>
                <Text style={styles.textSize}>
                  <Text style={styles.textFontStyle}>{item.follower}</Text>{' '}
                  {item.liked}{' '}
                  <Text note style={styles.textSize}>
                    {item.time}
                  </Text>
                </Text>
              </View>
            )}
            {item.images && (
              <View style={styles.rowWrap}>
                {item.images.map((data: any, index: number) => {
                  return (
                    <View key={index} style={styles.leftImgView}>
                      <Thumbnail square small source={data.pic} />
                    </View>
                  );
                })}
              </View>
            )}
          </Body>
        </Left>
        <Right style={styles.selfAlignImg}>
          {showImage && (
            <Thumbnail square source={item.thumbR} style={styles.rightThumb} />
          )}
          {rightButt && (
            <View>
              {item.follow && (
                <Button small style={styles.buttonColor}>
                  <Text style={styles.buttonTextSize} uppercase>
                    {item.follow}
                  </Text>
                </Button>
              )}
              {item.buttonR1 && (
                <Button small light>
                  <Text style={styles.buttonTextSize} uppercase>
                    {item.buttonR1}
                  </Text>
                </Button>
              )}
            </View>
          )}
        </Right>
      </CardItem>
    </Card>
  );
};
const FollowingView = (props: FollowProps) => {
  return (
    <Container>
      <Content>
        <FlatList
          data={data.following}
          renderItem={(item) =>
            _renderItem(item, props.showImage, props.rightButt)
          }
          keyExtractor={(item) => item.follower}
        />
      </Content>
    </Container>
  );
};
export default FollowingView;
