import React from 'react';
import { View, StyleSheet, Image, Text, FlatList } from 'react-native';
import { Header, Icon } from 'react-native-elements';
import { Thumbnail } from 'native-base';

export default class DashboardScreen extends React.Component {
    static navigationOptions = {
        title: 'Dashboard',
    };

    state = {
        streamsData: []
    }

    async componentWillMount() {
        await fetch('https://api.twitch.tv/helix/games/top', {
            method: 'GET',
            headers: {
                'Client-ID': 'urv4sceohtr6tljxoethd3slru1344',
            }
        }).then(response => response.text())
        .then(response => JSON.parse(response))
        .then(streamsData => this.setState({ streamsData: streamsData["data"] }));
    }

    render() {
        return(
            <View style={styles.container}>
                <Header backgroundColor='#202225'>
                    <Image source={require('../assets/images/logo.png')} style={{ width: 40, height: 40 }} />
                    <Text style={{ fontSize: 20, color: 'skyblue' }}>Dashboard</Text>
                    <Icon type='font-awesome' name='plus' color='skyblue' />
                </Header>
                <FlatList
                    data={this.state.streamsData}
                    renderItem={(item) => {
                        var url = item.item['box_art_url'].replace("{width}", '80').replace("{height}", '80');
                        return(
                            <View style={{
                                padding: 10,
                            }}>
                                <Thumbnail large source={{ uri: url }} />
                                <Text style={{
                                    textAlign: 'center',
                                    width: 80,
                                    marginTop: 10,
                                }}>{ item.item['name'] }</Text>
                            </View>
                        );
                    }}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    style={{
                        height: 10,
                    }}
                />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //alignItems: 'center',
        //justifyContent: 'center',
        backgroundColor: '#363636',
    },
});