import React, {Component} from 'react';
import {List, ListItem, View, Text, Thumbnail} from 'native-base';
import data from '../mock/calendar';
import {Platform, StyleSheet} from 'react-native';

class CalendarList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      TextHolder: null,
    };
  }

  replaceTextFunction = () => {
    var oldText = this.state.TextHolder.toString();
    var newText = oldText.replace('_', ' ');
    this.setState({
      TextHolder: newText,
    });
  };
  render() {
    return (
      <List>
        {data.map(item => (
          <ListItem
            key={item.id}
            avatar
            noIndent
            noBorder
            style={{
              borderBottomColor: 'rgba(192,192,192,0.7)',
              borderBottomWidth: 0.5,
            }}>
            <View style={{paddingRight: 15}}>
              <Thumbnail source={{uri: item.person.avatar}} />
            </View>
            <View style={styles.listContainer}>
              <Text>{item.person.name}</Text>
              <Text note style={{color: 'red'}}>
                {(this.state.TextHolder = item.type)} // <- right here
              </Text>
            </View>
          </ListItem>
        ))}
      </List>
    );
  }
}

export default CalendarList