import React from 'react';
import { View, ScrollView, Platform, Dimensions, StyleSheet } from 'react-native';
import { Icon } from 'react-native-elements';
import { Toolbar, ThemeContext, getTheme } from 'react-native-material-ui';
import Pdf from 'react-native-pdf';


export class StreckenScreen extends React.Component {

    constructor (props) {
            super(props);
            this.state = { troll : 'Marathon'};
    }
    static navigationOptions = {
        drawerLabel: 'Strecke',
        drawerIcon: ({ tintColor }) => (
            <Icon name={'place'} color={tintColor} />
        ),
    };



    // states

    render() {
        const sourcemar = require('./Infos/Strecke_mar_fix.pdf');
        const sourceteam = require('./Infos/Strecke_team_fix.pdf');
        const sourcecity = require('./Infos/Strecke_10k_fix.pdf');

        let sourceSite = sourcemar;
        if (this.state.troll == 'Teamrun') {
            sourceSite = sourceteam;
        } else if (this.state.troll == 'Cityrun') {
            sourceSite = sourcecity;
        } else {
            sourceSite = sourcemar;
        }

        return (
            <ThemeContext.Provider value={getTheme(brotheme)}>
                <View style={{ flexDirection: 'column', flex: 1 }}>

                    <Toolbar
                        leftElement="menu"
                        onLeftElementPress={() => this.props.navigation.openDrawer()}
                        centerElement="Streckenplan"
                        rightElement={{
                            menu: {
                                labels: ['Marathon', 'Teamrun', 'Cityrun']
                            }
                        }}
                        onRightElementPress={(label) => {
                            if (label.index == 0) {
                                let that = this;
                                (that) => that.setState({ troll : 'Marathon'})
                            } else if (label.index == 1) {
                                let that = this;
                                (that) => that.setState({ troll : 'Teamrun'})
                            } else if (label.index == 2) {
                                let that = this;
                                (that) => that.setState({ troll : 'Cityrun'})
                            }
                        }}
                    />
                    <Pdf
                        source={sourceSite}
                        onLoadComplete={(numberOfPages, filePath) => {
                            console.log(`number of pages: ${numberOfPages}`);
                        }}
                        onPageChanged={(page, numberOfPages) => {
                            console.log(`current page: ${page}`);
                        }}
                        onError={(error) => {
                            console.log(error);
                        }}
                        style={styles.pdf}
                    />
                </View>

            </ThemeContext.Provider >
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
    },
    pdf: {
        flex: 1,
        width: Dimensions.get('window').width,
        zIndex: 1,
        paddingTop: 30
    },
    head: {
        flex: 1,
    }
});

const brotheme = {
    palette: {
        primaryColor: '#1B88EA',
    },
}