import React, {Component} from 'react';
import {
   StyleSheet,
   View,
   Text,
   TextInput,
   ListView
} from 'react-native';

import NavigationBar from '../common/NavigationBar';
import DataRepository from '../expand/dao/DataRepository';
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import RepositoryCell from '../common/RepositoryCell';

const URL = 'https://api.github.com/search/repositories?q=';
const URL_STR = '&sort=stars';

export default class PopularPage extends Component {

   render() {

       return (
           <View>
               <NavigationBar
                   title={'最热'}
                   style={{backgroundColor: '#63B8FF'}}
               />
               <ScrollableTabView
                   tabBarPosition='top'
                   renderTabBar={() => <ScrollableTabBar/>}>
                   <PopularTab tabLabel='Java'></PopularTab>
                   <PopularTab tabLabel='IOS'></PopularTab>
                   <PopularTab tabLabel='ANDROID'></PopularTab>
                   <PopularTab tabLabel='JAVASCRIPT'></PopularTab>

               </ScrollableTabView>

           </View>

       )

   }
}

class PopularTab extends Component {

   constructor(props) {
       super(props);
       this.state = {
           result: '',
           dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
       }
       this.dataRepository = new DataRepository();
   }

   genUrl(query) {
       return URL + query + URL_STR;
   }

   componentDidMount() {
       this.onLoad();
   }

   onLoad() {

       let url = this.genUrl(this.props.tabLabel);
       this.dataRepository.fetchNetRepository(url)
           .then(result => {
               this.setState({
                   dataSource: this.state.dataSource.cloneWithRows(result.items)
               })
           })
           .catch(error => {
               console.log(error);
           })
   }

   renderRow(data) {

       return <RepositoryCell data={data}/>

   }

   render() {
       return (
           <View style={{flex: 1}}>
               {/*<Text style={styles.content}>{this.state.result}</Text>*/}
               <ListView
                   dataSource={this.state.dataSource}
                   renderRow={(data) => this.renderRow(data)}
               />
           </View>
       );
   }
}

const styles = StyleSheet.create({

   text: {
       fontSize: 30,
       color: 'black'
   },
   textInput: {
       height: 40,
       borderWidth: 1,
       borderColor: 'grey'
   },
   content: {
       height: 600
   }

})

export default class RepositoryCell extends Component {
   render() {
       return (
           <View style={{margin: 10}}>
               <Text>{this.props.data.full_name}</Text>
               <Text>{this.props.data.description}</Text>
               <Text>{this.props.data.owner.avatar_url}</Text>
               <Text>{this.props.data.stargazers_count}</Text>
           </View>

       )
   }
}