/*
* @Author: Thomas
* @Date:   2017-07-17 12:04:17
* @Last Modified by:   Thomas
* @Last Modified time: 2017-07-26 12:50:10
*/
"use strict";

import React from 'react';
import { View, StatusBar, Alert, Keyboard, FlatList, ScrollView, AppRegistry, RefreshControl } from 'react-native';
import { SearchBar, Icon } from 'react-native-elements'
import TopBar from './components/topbar'
import Card from './components/card'
import { Col, Row, Grid } from "react-native-easy-grid";

const styles = require('./stylesheet.js');
const globals = require('./const.js');
var nav = {};
var navFunction = {};

export default class MainView extends React.Component {
  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props);

    this.getResponse({
            'user': {
                'userId': 5
            },
            device: {
                locale: 'fr-FR'
            },
            conversation: {
                conversationId: 5,
                conversationState: ""
            },
            input: {
              inputType: 'KEYBOARD',
              rawInput: 'Quel est le président du Ghana ?',
              intent: 'ai.xact.intent.TEXT'
            }
        }).then((response) => response.text())
        .then((responseText) => {
            console.log("MAIN " + responseText);
        });

    this.state = {
      db: require('./localTest.json'),
      refreshing: false,
    };
  }


  getResponse(request) {
    return fetch(globals.API_URL, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(request)
    });
  }

  /*
  Called when text is submitted in the search bar
  */
  _sendText (text) {
    Keyboard.dismiss();
    Alert.alert(text);
    //TODO: WS call
  }

  _renderRow (item) {
    return (
      <Card
      key={item.id}
      data={item}
      navFunc={navFunction}
      />
    );
  }

  _openWebView (link, title, isVideo) {
    if (isVideo) {
      nav('Video', { link: link});
    } else {
      nav('Web', { link: link, title: title });
    }
  }

  _onRefresh() {
    this.setState({refreshing: true});
    //TODO: refresh data from API
    /*this.fetchData().then(() => {
      this.setState({refreshing: false});
    });*/
    this.setState({refreshing: false});
  }

  fetchData() {
    this.setState({
      db: this.state.db
    })
  }

  render() {
    const { navigate } = this.props.navigation;
    nav = navigate;
    navFunction = this._openWebView;

    return (
      <Grid style={styles.container}>
        <TopBar sendText={this._sendText}/>
        <Row>
          <ScrollView
              ref={ (ref) => this.scrollView = ref }
              refreshControl={
                <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={this._onRefresh.bind(this)}
                />
              }
            >
            {this.state.db.map(item =>  this._renderRow(item) )}
          </ScrollView>
        </Row>
      </Grid>
    );
  }
}