/**
 * 熱門發(fā)現(xiàn)
 */
'use strict';

import React, { Component } from 'react';
import {
  Modal,
  TouchableOpacity,
  ListView,
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  RefreshControl,
  InteractionManager
} from 'react-native';

import Login from '../user/login';
import Icon from '../svg/icon';
import PostShow from '../post/PostShow';
import StatusBar from '../components/StatusBar';
import ListItem from '../components/ListItem';
import styles from '../styles/common';
import routes from '../../routes';
import * as Storage from '../common/Storage';

import { hotListArticles } from '../actions/hotActions';
import { userFromSync, userToken } from '../actions/userActions';

let cacheResults = {
  dataBlob : [],
  skip     : 0,
  limit    : 4,
}

class Hot extends Component {
  constructor(props) {
    super(props);

    this.state = {
      checkItem    : '',
      checkIndex   : '',
      isFavorite   : false,
      animationType: 'none',
      modalVisible : false,
      transparent  : true,
      dataSource   : new ListView.DataSource({
        rowHasChanged  : (row1, row2) => row1 !== row2
      }),
      loaded       : true,
      isNull       : false,
      isMore       : false,
      isRefreshing : false,
    }

    this._favorite = this._favorite.bind(this);
    this._postToFriend = this._postToFriend.bind(this);
  }

  getArticles(skip, limit, isNew) {
    var url = routes.hot
    Storage.getToken()
      .then((token) => {
        if (token != '') {
        fetch(url, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': `JWT ${token}`,
          },
          body: JSON.stringify({
            skip: skip,
            limit: limit,
          })
          })
          .then((response) => response.json())
          .then((responseJson) => {
            if (responseJson.articles.length == 0 && skip == 0) {
              this.setState({
                isNull : true
              })
            } else if (responseJson.articles.length == 0 && skip != 0){
              this.setState({
                isMore : true
              })
            } else {
              if (isNew) {
                let datas = [...responseJson.articles];
                cacheResults.dataBlob = datas;
                var skilNext = skip + 5;

                this.setState({
                  dataSource: this.state.dataSource.cloneWithRows(datas),
                  loaded : false,
                  skip   : skilNext,
                  isRefreshing: false
                })
              } else {
                let datas = [...cacheResults.dataBlob];
                datas.push(...responseJson.articles);
                cacheResults.dataBlob = datas;
                var skilNext = this.state.skip + 5;

                this.setState({
                  dataSource: this.state.dataSource.cloneWithRows(datas),
                  loaded : false,
                  skip   : skilNext,
                  isRefreshing: false
                })
              }
            }
          })
          .catch((error) => {
            console.error(error);
          });
        } else {
          this._loginPush();
        }
      })
  }
  
  componentWillMount() {
    const { navigator, route } = this.props;
    route.title = "發(fā)現(xiàn)";
  }

  componentDidMount() {
    //從緩存加載數(shù)據(jù)到對應(yīng)的state
    const { dispatch } = this.props;
    // Storage.getUser()
    //   .then((user) => {
    //     dispatch(userFromSync(user));
    //   });
    //獲取發(fā)現(xiàn)數(shù)據(jù)
    InteractionManager.runAfterInteractions(() => {
      const { dispatch, userReducer } = this.props;
      Storage.getToken()
      .then((token) => {
        dispatch(userToken(token));
        dispatch(hotListArticles(token, cacheResults.skip, cacheResults.limit));
      });
    });
    //this.getArticles(this.state.skip, this.state.limit)
  }

  _renderEndReached() {
    const { hotReducer, userReducer, dispatch } = this.props;
    if (hotReducer.loaded) {
      return;
    }
    
    dispatch(hotListArticles(userReducer.token, hotReducer.skip + 5, hotReducer.limit))
  }

  // 下拉刷新
  _onRefresh() {
    this.setState({isRefreshing: true});
    //服務(wù)器獲取新的數(shù)據(jù)
    this.getArticles(0, 4, true)
  }

  _renderFooter(isNull, isMore) {
    if (isNull) {
      return (
        <View style={styles.nullBoxForLine}>
          <Text style={styles.nullBoxTextForLine}>~ 快去發(fā)現(xiàn)吧 ~</Text>
        </View>
      );
    } else if(isMore){
      return (
        <View style={styles.nullBoxForLine}>
          <Text style={styles.nullBoxTextForLine}>~ 沒有更多了喔 ~</Text>
        </View>
      );
    } else {
      return (
        <View style={styles.loadingMore}>
          <ActivityIndicator style={styles.loadIcon}/>
          <Text>正在加載...</Text>
        </View>
      );
    }
  }

  // 跳轉(zhuǎn)到登錄頁面
  _loginPush() {
    const { navigator } = this.props;
    if (navigator) {
      navigator.push({
        name     : 'login',
        component: Login,
      })
    }
  }
 
  // 跳轉(zhuǎn)到 postshow
  _showPost(rowData) {
    const { navigator } = this.props;
    if (navigator) {
      navigator.push({
        name     : 'postshow',
        component: PostShow,
        params   : {
          data: rowData,
          user: this.props.user
        }
      })
    }
  }

  // 顯示／隱藏modal
  _setModalVisible(visible) {
    this.setState({modalVisible: visible});
  };

  // 選中item
  _checkItem(item) {
    this.setState({checkItem : item});
    this.setState({isFavorite : item.isfavorite});
  };

  _checkIndex(index) {
    this.setState({checkIndex : index});
  }

  // 列表單元格
  _renderItem(rowData, sectionID, rowID) {
    return (
      <ListItem item={rowData} index={rowID} showPost= {this._showPost.bind(this)}
       modal= {this._setModalVisible.bind(this)} checkitem={this._checkItem.bind(this)} 
       checkindex = {this._checkIndex.bind(this)} navigator={this.props.navigator}
      />
    );
  }
  
  _renderSectionHeader(sectionData, sectionID) {
    return (
      <View style={styles.spaceBox}>
      </View>
    );
  }

  // 收藏功能
  _favorite(item) {
    if (item) {
      if (item.isfavorite) {
        this._favoriteRemove(item.favorite);
      } else {
        this._favoriteCreate(item.target_id, item.author_id._id);
      }
    }
  }

  // 創(chuàng)建收藏
  _favoriteCreate(postid, authorid){
    var createurl = routes.favoriteCreate;
    AsyncStorage.getItem('jwt', (err, token) => {
      fetch(createurl, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': `JWT ${token}`,
        },
        body: JSON.stringify({
          postid: postid,
          authorid: authorid,
        })
        })
        .then((response) => response.json())
        .then((responseJson) => {
          // 修改本地緩存數(shù)據(jù)
          cacheResults.dataBlob[this.state.checkIndex].isfavorite = true;
          cacheResults.dataBlob[this.state.checkIndex].favorite = responseJson;
          this.setState({
            checkIndex: '',
            isFavorite: true,
            dataSource: this.state.dataSource.cloneWithRows(cacheResults.dataBlob),
          })
          this._setModalVisible(false)
        })
        .catch((error) => {
          console.error(error);
        });
    });
  }
  // 取消收藏
  _favoriteRemove(favorite){

    var removeurl = routes.favoriteRemove + favorite._id;
    AsyncStorage.getItem('jwt', (err, token) => {
      fetch(removeurl,{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Authorization': `JWT ${token}`,
        }
      })
      .then((response) => response.json())
      .then((responseJson) => {
        if (responseJson == 1) {
          // 修改本地緩存數(shù)據(jù)
          cacheResults.dataBlob[this.state.checkIndex].isfavorite = false;
          cacheResults.dataBlob[this.state.checkIndex].favorite = '';
          this.setState({
            checkIndex: '',
            isFavorite: false,
            dataSource: this.state.dataSource.cloneWithRows(cacheResults.dataBlob),
          })
          this._setModalVisible(false)
        }
      })
      .catch((error) => {
        console.error(error);
      })
      .done();
    });
  }

  // 轉(zhuǎn)發(fā)到動態(tài)
  _postToFriend(item) {
    var url = routes.postToFriend + item.target_id + '/user/' + this.state.user._id;
    AsyncStorage.getItem('jwt', (err, token) => {
      fetch(url,{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Authorization': `JWT ${token}`,
        }
      })
      .then((response) => response.json())
      .then((responseJson) => {
        if (responseJson) {
          this._setModalVisible(false)
          setTimeout(function(){
            alert('轉(zhuǎn)發(fā)成功爆班！')
          }, 1000)
        }
      })
      .catch((error) => {
        console.error(error);
      })
      .done();
    });
  }

  render() {
    let modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
    };
    let innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: '#fff'}
      : null;

    const { hotReducer } = this.props;

    return (
      <View style={styles.container}>
        <StatusBar/>
        <View style={styles.header}>
          <Text style={styles.headerTitle} numberOfLines={1}>發(fā)現(xiàn)</Text>
        </View>
        <ListView
          initialListSize = {1}
          enableEmptySections = {true}
          pageSize = {5}
          onEndReached = {this._renderEndReached.bind(this)}
          onEndReachedThreshold = {20}
          dataSource = {this.state.dataSource.cloneWithRows(hotReducer.dataBlob)} 
          refreshControl = {
            <RefreshControl
              refreshing = {this.state.isRefreshing}
              onRefresh = {this._onRefresh.bind(this)}
            />
          }
          renderFooter = {this._renderFooter.bind(this, this.state.isNull, this.state.isMore)}
          renderRow = {this._renderItem.bind(this)}
          style = {styles.listview}
        />
        <Modal
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
          onRequestClose={() => this._setModalVisible(false)}
          >
          <View style={[styles.modalContainer, modalBackgroundStyle]}>
            <View style={[styles.modalInnerContainer, innerContainerTransparentStyle]}>
              <TouchableOpacity onPress={ () => this._postToFriend(this.state.checkItem)}>
                <View style={styles.itemBox}>
                  <Text style={styles.itemText}>轉(zhuǎn)發(fā)</Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={ () => this._favorite(this.state.checkItem)}>
                <View style={styles.itemBox}>
                  <Text style={styles.itemText}>{this.state.isFavorite ? '取消收藏' : '收藏'}</Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={this._setModalVisible.bind(this,false) }>
                <View style={[styles.itemBox,{height:60,borderTopWidth:10,borderTopColor:'#F8F8F8'}]}>
                  <Text style={[styles.itemText]}>取消</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

module.exports = Hot;