import React, {Component} from 'react';
import {ScrollView, Text, StyleSheet, View, Modal, TouchableHighlight, AsyncStorage} from 'react-native';
import DeviceInfo from 'react-native-device-info'
import Accordion from 'react-native-collapsible/Accordion';
import * as Animatable from 'react-native-animatable';
import FitImage from 'react-native-fit-image';
import {Header, Icon} from 'react-native-elements'

var services = require('../assets/service.json');
//
// var SECTIONS = [
//     {
//         title: 'Netflix',
//         nom: 'DELIGNIERES',
//         prenom: 'Matthieu',
//         sexe: 'Homme',
//         ville: 'Anzin',
//         isAbo: 'true',
//         durationAbo: '6 mois',
//         hasNews: 'false',
//         image: 'https://img3.telestar.fr/var/telestar/storage/images/3/0/5/6/3056045/netflix-annonce-des-projets-france_width1024.png'
//     },
//     {
//         title: 'Allocine',
//         nom: 'HUBLARD',
//         prenom: 'Grobin',
//         sexe: 'Male',
//         ville: 'Campagne',
//         isAbo: 'true',
//         durationAbo: '3 mois',
//         hasNews: 'true',
//         image: 'http://www.business-actor.com/wp-content/uploads/2013/07/logo-allocine.png'
//     },
//     {
//         title: 'Brazzer',
//         nom: 'Sabadini',
//         prenom: 'Jerome',
//         sexe: 'Homme',
//         ville: 'Valenciennes',
//         isAbo: 'true',
//         durationAbo: 'A vie',
//         hasNews: 'true',
//         image: 'https://i.redd.it/9nfas2kg75py.png'
//     },
//     {
//         title: 'Spotify',
//         nom: 'LEBRUM',
//         prenom: 'Audrey',
//         sexe: 'Femme',
//         ville: 'Famars',
//         isAbo: 'false',
//         durationAbo: '',
//         hasNews: 'false',
//         image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Spotify_logo_with_text.svg/2000px-Spotify_logo_with_text.svg.png'
//     }
// ];

const styles = StyleSheet.create({
    fitImage: {
        borderRadius: 20,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
    },
    title: {
        textAlign: 'center',
        fontSize: 22,
        fontWeight: '300',
        marginBottom: 20,
    },
    header: {
        backgroundColor: '#F5FCFF',
        padding: 10,
    },
    headerText: {
        textAlign: 'center',
        fontSize: 16,
        fontWeight: '500',
    },
    content: {
        padding: 20,
        backgroundColor: '#fff',
    },
    active: {
        backgroundColor: 'rgba(255,255,255,1)',
    },
    inactive: {
        backgroundColor: 'rgba(245,252,255,1)',
    },
    selectors: {
        marginBottom: 10,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    selector: {
        backgroundColor: '#F5FCFF',
        padding: 10,
    },
    activeSelector: {
        fontWeight: 'bold',
    },
    selectTitle: {
        fontSize: 14,
        fontWeight: '500',
        padding: 10,
    },
});
var update = require('react-addons-update');

class ResultScreen extends Component {

    state = {
        modalVisible: false,
    };
    static navigationOptions = {
        header: () => null,
    };

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }

    json = {};
    SECTIONS = [];

    constructor(props) {
        super(props);
        this.setModalVisible = this.setModalVisible.bind(this);
        this.updateState = this.updateState.bind(this);
        this._renderContent = this._renderContent.bind(this)
        this._renderHeader = this._renderHeader.bind(this);
        this.render = this.render.bind(this);
        this.json = {};
        this.SECTIONS = [];
        this._parseStorage();
    }

    updateState(infoName) {
        let newState = {};
        let scope = this;
        return function (value) {
            newState[infoName] = scope.state[infoName];
            newState[infoName].value = value;
            scope.setState(function () {
                return update(scope.state, {$merge: newState}
                )
            });
        }
    }

    _renderHeader(section, index, isActive, sections) {
        return (
            <Animatable.View
                duration={300}
                transition="backgroundColor"
                style={{backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)')}}>
                {/*<FitImage*/}
                {/*source={{uri: section.image}}*/}
                {/*style={styles.fitImage}*/}
                {/*/>*/}
                <Text style={styles.headerText}>TITRE</Text>
            </Animatable.View>
        );
    }

    _renderContent(section, i, isActive, sections) {
        // let message = "";
        // console.error(section);
        // for(var l = 0; l < section.length; l++){
        //      message.append(section[i]+"\n");
        // }

        return (
            <Animatable.View
                duration={300}
                transition="backgroundColor"
                style={{backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)')}}>
                <Animatable.Text
                    duration={300}
                    easing="ease-out"
                >
                    <Text>test</Text>
                </Animatable.Text>
            </Animatable.View>
        );
    }

    _parseStorage(){
        let scope = this;
        AsyncStorage.getItem('AwesomeProjectStorage').then(function (data) {
            scope.json = JSON.parse(data);

            let numberOfServices = Object.keys(scope.json).length;
            for(let index = 0; index < numberOfServices; index++){
                let service = scope.json[Object.keys(scope.json)[index]];
                scope.SECTIONS.push(service);
                //let numberOfElementsInThisService = Object.keys(this.service).length;
            }

            // console.error(numberOfElementsInThisService);
            // let js2 = Object.keys(service[0]);
            // console.error(service[0][js2[0]]);
            // // console.error(js+" \n "+this.json[js]+"\n")
            // console.error("!data: " + this.json);
            scope.forceUpdate();
        });
    }

    render() {
        // if(this.json == null){
        //     this.json=[];
        // }
        if(this.SECTIONS == null){
            this._parseStorage();
        }
        return (
            <ScrollView>
                <View style={{backgroundColor: 'white'}}>
                    <Header
                        centerComponent={{text: "Les résultats", style: {color: 'tomato'}}}
                        rightComponent={
                            <Icon
                                name="extension"
                                color='tomato'
                                onPress={() => {
                                    this.setModalVisible(!this.state.modalVisible);
                                }}
                                underlayColor={'#64b5f6'}
                            />
                        }
                        outerContainerStyles={{height: 50}}
                        innerContainerStyles={{height: 50}}
                        backgroundColor="white"
                    />
                    <Modal
                        style={{
                            position: 'relative',
                            padding: 30
                        }}
                        animationType="slide"
                        transparent={false}
                        visible={this.state.modalVisible}
                        onRequestClose={() => {
                            alert('Modal has been closed.');
                        }}>
                        <Text style={{
                            fontSize: 20,
                            marginBottom: 10,
                            marginLeft: 10,
                            marginTop: 10,
                        }}>Données du téléphone</Text>

                        <Text style={{
                            marginLeft: 10
                        }}>Marque : {DeviceInfo.getBrand()}</Text>
                        <Text style={{
                            marginLeft: 10
                        }}>Nom du device : {DeviceInfo.getDeviceName()}</Text>
                        <Text style={{
                            marginLeft: 10
                        }}>Fournisseur : {DeviceInfo.getManufacturer()}</Text>
                        <Text style={{
                            marginLeft: 10
                        }}>Numéro de Téléphone : {DeviceInfo.getPhoneNumber()}</Text>
                        <Text style={{
                            marginLeft: 10
                        }}>Mémoire max autorisé(en bytes): {DeviceInfo.getMaxMemory()}</Text>
                        <Text style={{
                            marginLeft: 10
                        }}>Mémoire Total (en bytes): {DeviceInfo.getTotalMemory()}</Text>
                        <Text style={{
                            marginLeft: 10
                        }}>Stockage total (en bytes): {DeviceInfo.getTotalDiskCapacity()}</Text>

                        <TouchableHighlight
                            onPress={() => {
                                this.setModalVisible(!this.state.modalVisible);
                            }} style={{
                            position: 'absolute',
                            top: 10,
                            right: 10
                        }}>
                            <Icon
                                name="close"
                                color='tomato'
                                onPress={() => {
                                    this.setModalVisible(!this.state.modalVisible);
                                }}
                                style={{
                                    fontSize: 50,

                                }}
                                underlayColor={'#64b5f6'}
                            />
                        </TouchableHighlight>
                    </Modal>
                </View>
                <ScrollView>
                    <Accordion
                        sections={this.SECTIONS}
                        renderHeader={this._renderHeader}
                        renderContent={this._renderContent}
                    />
                </ScrollView>
            </ScrollView>
        );
    }
}

export default ResultScreen