/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
  SafeAreaView,
  ImageBackground,
  Text,
  View,
  //TouchableOpacity,
  StyleSheet,
  ScrollView,
 // Alert,
} from 'react-native';
//import {Icon} from 'react-native-elements';
//import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';

//import AsyncStorage from '@react-native-async-storage/async-storage';
import * as RNFS from 'react-native-fs';
var path = RNFS.DocumentDirectoryPath + '/test.txt';
var array = [];

class LogBook extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      logbook: [],

    };
  }
  displayData = async () => {

    RNFS.readFile(path, 'ascii')
      .then((res) => {
        this.setState({
          logbook: res.split('\n'),
        });
       // var l = this.state.logbook.length;
        //console.log(res);
       // console.log(this.state.logbook);
    let index = -1;
    array = this.state.logbook;
   // console.log(array);
    if ((index = array.indexOf('')) !== -1) {
      array.splice(index, 1);
     this.setState({
          logbook: array,
        });
         console.log(this.state.logbook);
    }
    // console.log(this.state.logbook.length);
      })
      .catch((err) => {
        console.log(err.message, err.code);
      });
  };

  componentDidMount() {
    Orientation.lockToPortrait();
    this.displayData();
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require('../img/background.jpg')}
          style={{
            width: '100%',
            height: '100%',
          }}>
          <SafeAreaView>
            <ScrollView
              style={{
                marginTop: 50,
                marginLeft: 5,
                marginRight: 5,
              }}>
              {this.state.logbook.map((item, id) => (
                <View
                  key={id}
                  style={{
                    flexDirection: 'row',
                    marginBottom: 10,
                    padding: 15,
                    borderWidth: 2,
                    borderColor: 'black',
                    backgroundColor: 'white',
                    borderRadius: 10,
                  }}>
                  <Text style={{fontSize:15}}>{item.split(',').join('\n')}</Text>
                </View>
              )).reverse()}
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}
export default LogBook;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  menu: {
    marginTop: '3%',
    marginBottom: '2%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '15%',
    marginLeft: '5%',
    marginRight: '5%',
    borderRadius: 10,
    borderWidth: 2,
    borderColor: 'white',
  },
});
