import React, {Component} from 'react';
import {StyleSheet, Text, View, ScrollView, TouchableOpacity, Alert} from "react-native";
import {Tabs, Tab, Button,} from 'native-base';

import {connect} from "react-redux";
import * as actions from "../../store/actions";

import DefaultTracks from "./DefaultTracks";
import PersonalTracks from "./PersonalTracks";
import HeaderMenu from "../HeaderMenu";
import EditTracks from "./EditTracks";

const Icons = createIconSetFromFontello(fontelloConfig);


import {createIconSetFromFontello} from 'react-native-vector-icons';
import fontelloConfig from '../../../config.json';


import PouchDB from 'pouchdb-react-native';
import FeedBack from "../Feedback";

const localDB = PouchDB('iloveaveiro');

class TracksList extends Component {
    state = {
        tracks: []
    };

    render() {
        let {userData} = this.props;
        return (
            <View style={{flex: 1}}>
                <View>
                    <HeaderMenu name='Trajetos' navigation={this.props.navigation}/>
                </View>
                <View style={styles.container}>
                    <View
                        style={{
                            flex: 1,
                            flexDirection: 'row',
                            marginBottom: 40,
                            marginTop: 20,
                            textAlign: 'center'
                        }}
                    >

                        <Tabs tabBarUnderlineStyle={{backgroundColor: 'orange'}} tabContainerStyle={{elevation: 0}}>
                            <Tab
                                tabStyle={{backgroundColor: "white"}}
                                activeTabStyle={{backgroundColor: "white"}}
                                activeTextStyle={{color: 'orange'}}
                                textStyle={{color: 'grey'}}
                                heading="Predefinidos"
                            >
                                <View style={{width: '100%', height: '100%', marginTop: 5}}>
                                    <View style={{position: 'absolute', top: 0, right: 10, zIndex: 99}}>
                                        <Button transparent rounded onPress={() => {
                                            Alert.alert("KJASLDASOIDAS")
                                        }}>
                                            <Icons name="filtros" size={70} style={{color: "orange"}} />
                                        </Button>
                                    </View>
                                    <ScrollView>
                                        {this.props.tracks.length !== 0 ? (
                                            this._setContent(this.props.tracks)
                                        ) : (
                                            <Text>There are no tracks available</Text>
                                        )}
                                    </ScrollView>

                                </View>

                            </Tab>
                            <Tab
                                tabStyle={{backgroundColor: 'white'}}
                                activeTabStyle={{backgroundColor: "white"}}
                                activeTextStyle={{color: 'orange'}}
                                textStyle={{color: 'grey'}}
                                heading="Meus trajetos"
                            >
                                <View style={{width: '100%', marginTop: 20}}>
                                    <ScrollView>
                                        {userData ?  <View style={{position: 'absolute', top: 0, right: 10, zIndex: 99}}>
                                            <Button transparent rounded onPress={() => {
                                            Alert.alert("KJASLDASOIDAS")
                                        }}>
                                                <Icons name="filtros" size={70} style={{color: "orange"}} />
                                            </Button>
                                        </View> && (
                                            this.props.favTracks.length !== 0 ? (
                                                this._setPersonalTracks(this.props.favTracks)
                                            ) : (
                                                <Text>Ainda não criaste nenhum trajeto</Text>
                                            )
                                        ) : (
                                            <FeedBack type={1}/>
                                        )}
                                    </ScrollView>
                                </View>
                            </Tab>
                        </Tabs>
                    </View>
                </View>
            </View>
        )
    }

    componentDidMount() {
        let {userData} = this.props;
        this.props.getTracks();
        {
            userData && this.props.getFavTracks(userData.id);
        }
    }

    _setContent = tracks => {
        let content = [];

        tracks.map((track, key) => {
            content.push(
                <DefaultTracks data={track}/>
            );
        });

        return content;
    };

    _setPersonalTracks = tracks => {
        let content = [];

        tracks.map(track => {
            content.push(
                <PersonalTracks data={track}/>
            )
        });

        return content;
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    title: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#fff',
        marginTop: 40
    }
});

function mapStateToProps(state) {
    return {
        tracks: state.tracks.tracks,
        favTracks: state.favTracks.favTracks,
        userData: state.user.user
    };
}

export default connect(
    mapStateToProps,
    actions
)(TracksList);