import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Animated } from 'react-native';
import Icon from '@expo/vector-icons/MaterialCommunityIcons';
import { AnimatedRegion } from 'react-native-maps';

class ComponentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
        like: false,
    };


  }


  ChangeLikeState = () =>{
      this.setState(prevState => ({
          like: !prevState.like
      }));
  }

  render() {

    let likeButton;

    if(!this.state.like){
        likeButton =

       <Icon style = {styles.iconFeedRight}
        name="thumb-up-outline"
        type= "thumb-up-outline"
        color="rgba(255,255,255, 0.7)"
        size = {36}
        onPress = {this.ChangeLikeState}
       ></Icon>

    } else {
        likeButton =

        <Icon style = {styles.iconFeedRight}
        name="thumb-up"
        type= "thumb-up"
        color="rgba(255,255,255, 0.7)"
        size = {36}
        onPress = {this.ChangeLikeState}
       ></Icon>


    }
    return (
        <View style={styles.boxFeed}>
        <View style={styles.rows}>
            <Image style ={styles.avatarFeed} source = {require("../stenson.jpg")}></Image>
            <View style={styles.columns}>
            <Text style = {styles.textFeed}>
             {this.props.name} added a session.
            </Text>
            <Text style = {styles.textFeed}>
             Yesterday 15:15
            </Text>
            <View style={styles.rows}>
            <Icon style = {styles.iconFeed}
            name="golf"
            type="golf"
            color="rgba(255,255,255, 0.7)"
            size = {36}></Icon>
            <Icon style = {styles.iconFeed}
            name="golf"
            type="golf"
            color="rgba(255,255,255, 0.7)"
            size = {36}></Icon>
            <Icon style = {styles.iconFeed}
            name="dumbbell"
            type="dumbbell"
            color="rgba(255,255,255, 0.7)"
            size = {36}></Icon>
            <View style={styles.rowsRight}>
            </View>
            <Icon style = {styles.iconFeedRight}
            name="message-outline"
            type="message-outline"
            color="rgba(255,255,255, 0.7)"
            size = {36}></Icon>

            {likeButton}

            </View>

            </View>
        </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    iconFeed: {
        marginTop: 8,
        marginRight: 10,
    },

    iconFeedRight: {
        marginTop: 8,
        marginRight: 20,
    },


    container: {
        flex: 1,
    },

    columns: {
        marginLeft: 10
    },

    avatarFeed: {
    width:80,
    height:80,
    borderRadius:100,
    borderWidth:1,
    marginLeft: 20,


    },

    rows: {
        flexDirection: 'row',
    },


    rowsRight: {
        flexDirection: 'row',

        marginLeft: 60,
    },

    textFeed: {
    fontSize: 18,
    color: "white",
    fontWeight: "bold",
    marginBottom: 5,

    },

    boxFeed: {
        backgroundColor: "rgba(93, 122, 177, 0.4)",

        width: "100%",
        paddingTop: 20,
        paddingBottom: 20,
        marginTop: 20,
        marginBottom: 10,

    }


    });

export default ComponentName;