/**
 * 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 react in our code.

import {
  StyleSheet,
  ActivityIndicator,
  FlatList,
  Text,
  View,
  Alert,
  RefreshControl,
  Image,
} from 'react-native';
import { Container } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import * as Font from 'expo-font';
//import all the components we are going to use.
interface Iprops extends NavigationDrawerScreenProps { }
export default class Project extends Component<Iprops> {
  state = { refreshing: true, dataSource: [] };
  constructor(props: Iprops | Readonly<Iprops>) {
    super(props);
    //True to show the loader

    //Running the getData Service for the first time
    this.GetData();
  }
  toggleMenu = () => this.props.navigation.toggleDrawer();
  async componentDidMount() {
    await Font.loadAsync({
      montserrat: require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  GetData = () => {
    const { dataSource } = this.state;
    //Service to get the data from the server to render
    return fetch(
      'http://www.mocky.io/v2/5c9215a73200005d006bccee?mocky-delay=5000ms'
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson, '<==<dataSource');
        this.setState({
          refreshing: false,
          //Setting the data source for the list to render
          dataSource: responseJson.result,
        });
      })
      .catch((error) => {
        console.error(error);
      });
  };
  ListViewItemSeparator = () => {
    return (
      //returning the listview item saparator view
      <View
        style={{
          height: 1,
          width: '100%',
          backgroundColor: '#808080',
        }}
      />
    );
  };
  onRefresh() {
    //Clear old data of the list
    this.setState({ refreshing: true });
    //Call the Service to get the latest data
    this.GetData();
  }
  render() {
    if (this.state.refreshing) {
      return (
        //loading view while data is loading
        <Container>
          <HeaderCommon title="Refresh Control" toggleMenu={this.toggleMenu} />
          <View style={{ flex: 1, paddingTop: 20 }}>
            <ActivityIndicator />
          </View>
        </Container>
      );
    }
    return (
      //Returning the ListView
      <Container>
        <HeaderCommon title="Refresh Control" toggleMenu={this.toggleMenu} />
        <View style={styles.MainContainer}>
          {this.state.fontLoaded ? (
            <FlatList
              data={this.state.dataSource}
              ItemSeparatorComponent={this.ListViewItemSeparator}
              renderItem={({ item }) => (
                <>
                  <View
                    style={{
                      flex: 0.3,
                    }}
                  >
                    <Image
                      source={{ uri: item.image }}
                      style={styles.imageView}
                    />
                  </View>
                  <View
                    style={{
                      flex: 0.7,
                      marginLeft: 70,
                    }}
                  >
                    <Text style={styles.rowViewContainer}>{item.author}</Text>
                    <Text style={styles.titleContainer} >
                      {item.title}
                    </Text>
                  </View>
                </>
              )}
              refreshControl={
                <RefreshControl
                  //refresh control used for the Pull to Refresh
                  refreshing={this.state.refreshing}
                  onRefresh={this.onRefresh.bind(this)}
                />
              }
            />
          ) : null}
        </View>
      </Container>
    );
  }
}
const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: 'center',
    flex: 1,
    marginTop: 10,
  },
  rowViewContainer: {
    fontFamily: 'montserrat',
    fontSize: 16,
    padding: 10,
    fontWeight: 'bold',
    paddingBottom: 0
  },
  titleContainer: {
    fontFamily: 'montserrat',
    fontSize: 14,
    padding: 10,
    paddingTop: 0,
  },
  imageView: {
    height: 60,
    width: 60,
    position: 'absolute',
  },
});
