import React, {Component} from 'react';
import {
    Image,
    View,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Text,
    FlatList
} from 'react-native';
import {Directory} from '../../public/plugin/api';

const back_image = require("./back.png");

export class FullList extends Component {
    
    render(){
       
        const data = this._getData();
        const content = data.map((item, index) => (           
            this.getItem(item, index)
        )).slice(4);
      
        return (
            
                <ScrollView contentContainerStyle={styles.list}>
                    
                    <TouchableOpacity
                        onPress={
                            this.props.Change
                        }><Image source={back_image} style={{ width: 25, height: 25, margin: 'auto'}} />
                        
                        </TouchableOpacity><Text style={{margin: 'auto',"font-size" : "20px",}}>全部</Text>
                        {content}
                </ScrollView>
            
        )
        
    }
    _getData() {
        return this.props.pprops.currentNode.getChildNodes();
    }
    getItem(item, index) {
        //debugger;
        
        return (
            <View style={styles.gridWrapper} key={index}>
                    <Text style = {styles.title} >{item.title}</Text>
                    <Sub item = {item} navigateNode ={this.props.pprops.navigateNode} />

            </View>
        )
    }
}

class Sub extends Component{
    render(){
        //debugger;
        const data = this.props.item.getChildNodes();
        const content = data.map((item, index) => (           
            this.getItem(item, index)
        ));
        return (
            <ScrollView contentContainerStyle={styles.list}>{content}</ScrollView>
            
        )
    }
    getItem(item, index) {
        //debugger;
        return (
            <View style={styles.box} key={index}>
                <TouchableOpacity 
                    onPress={() => this.props.navigateNode(item)}>
                    {Directory.createIconGrid(item, {iconStyle: styles.gridIcon})}
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    box:{
        width : "20%",
        flexWrap : "nowrap",
    },
    title:{
        height : 56,
        fontSize : "20px",
        marginTop: 10
    },
    gridWrapper: {
        width: "100%",
        
        //height: "17.5%",
        marginTop: 10
    },
    gridIcon: {
        width: 36,
        height: 36,
        borderRadius: 8,
        
    },
    list: {
        flex: 1,
        flexDirection: "row",
        overflow: "hidden auto",
        //alignContent:"flex-start",
        flexWrap: "wrap",
        width: "100%",
        transform: "translateZ(0px)"
       
    }
});