import React, {Component} from 'react';
import {
  FlatList,
  RefreshControl,
  Button,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {tabNav} from '../navigator/NavigationDelegate';
import NavigationBar from './NavigationBar';
import keys from '../res/data/keys.json';
import actions from '../action';
import {connect} from 'react-redux';
import DataStore, {FLAG_STORAGE} from '../expand/dao/DataStore';
import Types from '../action/types';
import NavigationUtil from '../navigator/NavigationUtil';

const URL = 'https://api.gethub.com/search/repositories?q=';
const QUERY_STR = '&sort=stars';
const THEME_COLOR = 'red';

export default class PopularPage extends Component<any> {
  render() {
    const {theme} = this.props;
    const TabNavigator = keys.length
      ? tabNav({
          Component: PopularTabPage,
          theme: {themeColor: theme},
          keys,
        })
      : null;
    return (
      <View style={styles.container}>
        <NavigationBar title="最热" />
        {TabNavigator}
      </View>
    );
  }
}

class PopularTab extends Component<any> {
  public storeName: string;
  constructor(props: any) {
    super(props);
    const {tabLabel} = this.props;
    console.log(tabLabel);
    this.storeName = tabLabel;
  }
  componentDidMount() {
    this.loadingData();
  }

  loadingData() {
    const {onLoadPopularData} = this.props;
    const url = this.genFtechUrl(this.storeName);
    onLoadPopularData(this.storeName, url);
  }

  genFtechUrl(key: string) {
    return URL + key + QUERY_STR;
  }

  renderItem(data: any) {
    const item = data.item;
    return (
      <View style={{marginBottom: 10}}>
        <Text style={{backgroundColor: '#faa'}}>{JSON.stringify(item.id)}</Text>
      </View>
    );
  }

  render() {
    const {popular} = this.props;
    let store = popular?.[this.storeName];
    if (!store) {
      store = {
        items: [],
        isloading: false,
      };
    }
    return (
      <View>
        <FlatList
          data={store.items}
          renderItem={data => this.renderItem(data)}
          keyExtractor={item => '' + item.id}
          refreshControl={
            <RefreshControl
              title={'Loading'}
              titleColor={THEME_COLOR}
              colors={[THEME_COLOR]}
              refreshing={store.isLoading}
              onRefresh={() => this.loadingData()}
              tintColor={THEME_COLOR}
            />
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
const mapStateToProps = (state: any) => ({
  popular: state.popular,
});
const mapDispatchToProps = (dispatch: any) => ({
  onLoadPopularData: (storeName: string, url: string) =>
    dispatch(actions.onLoadPopularData(storeName, url)),
});

const PopularTabPage = connect(
  mapStateToProps,
  mapDispatchToProps,
)(PopularTab);