import React, {Component} from 'react';
import {
   StyleSheet,
   Text,
   View,
} from 'react-native';
import DataRepository from '../expand/dao/DataRepository';
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view';
const URL = 'https://api.github.com/search/repositories?q=';
const QUERY_STR = '&sort=stars';
export default class PopularPage extends Component {
   constructor(props) {
       super(props);
   }

   render() {
       return (
           <View>
               <ScrollableTabView
                   renderTabBar={() => <DefaultTabBar/>}>
                   <PopularTab tabLabel='java'>JAVA</PopularTab>
                   <PopularTab tabLabel='ios'>IOS</PopularTab>
                   <PopularTab tabLabel='android'>Android</PopularTab>
                   <PopularTab tabLabel='javascript'>JavaScript</PopularTab>
               </ScrollableTabView>
           </View>
       )
   }
}

class PopularTab extends Component {
   constructor(props) {
       super(props);
       this.dataRepository = new DataRepository();
       this.state = {
           result: '',
       }
   }

   componentDidMount() {
       this.onLoad();
   }

   onLoad() {
       let url = URL + this.props.tabLabel + QUERY_STR;
       this.dataRepository.fetchNetRepository(url)
           .then((result) => {
               this.setState({
                   result: JSON.stringify(result)
               })
           })
           .catch((error) => {
               this.setState({
                   result: JSON.stringify(error)
               })
           })
   }

   render() {
       return (
           <View>
               <Text style={{height: 600}}>{this.state.result}</Text>
           </View>
       )

   }
}