import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, FlatList, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
import SegmentedBar from './SegmentedBar'
import Carousel from './Carousel'
import DashSecondLine from './DashSecondLine'
import Header from './Header'
import CodeDetail from './CodeDetail'

var { height, width } = Dimensions.get('window');
export default class Home extends Component {

    // static navigationOptions =  ({navigation,screenProps})=>({
    //     tabBarLabel: '首页',
    //     tabBarIcon: ({ focused, tintColor }) => <Image style={styles.tabImg} source={`${focused ? require('../static/img/home.png') : require('../static/img/home-unchoose.png')}`}/>,
    // });

    constructor(props) {
        super(props);

        // var barItems = [
        //     {
        //         title:'浏览记录',
        //         type: 0,
        //         content:[
        //             {
        //                 timeText:'今天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'今天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'今天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'今天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'今天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'昨天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'昨天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             },
        //             {
        //                 timeText:'昨天',
        //                 title:'3号免手洗',
        //                 time:'查看于1小时前',
        //             }
        //         ]
        //     },{
        //         title:'收藏列表',
        //         type: 1,
        //         content:[
        //             {
        //                 title:'3号免手洗',
        //                 time:'收藏于1小时前',
        //             }
        //         ]
        //     }
        // ];

        var history = {
            title: '浏览记录',
            type: 0,
            content: [
                {
                    timeText: '今天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '今天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '今天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '今天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '今天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '昨天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '昨天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                },
                {
                    timeText: '昨天',
                    title: '3号免手洗',
                    time: '查看于1小时前',
                }
            ]
        }

        var collect = {
            title: '收藏列表',
            type: 1,
            content: [
                {
                    title: '3号免手洗',
                    time: '收藏于1小时前',
                }
            ]
        }

        this.justifyItemItems = ['fixed', 'scrollable'];
        this.indicatorTypeItems = ['none', 'boxWidth', 'itemWidth', 'customWidth'];
        this.indicatorPositionItems = ['top', 'bottom'];
        if (!this.state) {
            this.state = {}
        }
        Object.assign(this.state, {
            justifyItem: 'fixed',
            indicatorType: 'itemWidth',
            indicatorPosition: 'bottom',
            animated: true,
            autoScroll: true,
            activeIndex: 0,
            custom: false,
            history: history,
            collect: collect
        });
    }

    onSegmentedBarChange(index) {
        if (index != this.state.activeIndex) {
            this.setState({ activeIndex: index });
            if (this.refs.carousel) {
                this.refs.carousel.scrollToPage(index, false);
            }
        }
    }

    onCarouselChange(index) {
        index != this.state.activeIndex && this.setState({ activeIndex: index });
    }

    getContent(item, _this) {
        if (item.type == 0) {
            return (
                <View>
                    {item.content.length == 0 ? <View>
                        <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', alignItems: 'center', flexDirection: 'column', textAlign: 'center', height: height - 130 }}>
                            <Image style={[styles.noResult]} source={require('../static/img/no_result.png')} />
                            <Text style={{ textAlign: 'center', fontSize: 15, marginTop: 15 }}>这里空空如也，快去扫描看看</Text>
                        </View>
                    </View> : item.content.map((itemChild, index) => (
                        <View style={{ flex: 1, flexDirection: 'row' }} key={'menu' + index}>
                            <Text style={{ marginTop: 30, marginLeft: 15, marginRight: 5, color: '#000' }}>{itemChild.timeText}</Text>

                            <View style={{ marginRight: 20, marginVertical: 10, paddingHorizontal: 20, paddingTop: 20, borderWidth: 1, borderColor: '#ddd', borderRadius: 5, height: 130 }}>
                                <View style={{ height: 58 }}>
                                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                                        <View>
                                            <Text style={{ fontSize: 15, height: 18, color: '#000' }}>{itemChild.title}</Text>
                                            <Text style={{ fontSize: 12, height: 15, marginTop: 10, color: '#bbb' }}>{itemChild.time}</Text>
                                        </View>
                                        <TouchableOpacity  onPress={() => {
                                            this.refs.dialog._setModalVisible(true);
                                        }}>
                                            <Image style={styles.tabImg} source={require('../static/img/qrcode.png')} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                                <DashSecondLine backgroundColor='#ddd' len={60} width={width - 100}></DashSecondLine>
                                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
                                    <TouchableOpacity onPress={() => { item.content.splice(index, 1); _this.setState({ history: item }) }}>
                                        <Image style={{ width: 15, height: 15 }} source={require('../static/img/delete.png')} />
                                    </TouchableOpacity>
                                    <Text onPress={() => { _this.props.navigation.navigate('Details') }}>查看详情</Text>
                                </View>
                            </View>
                        </View>
                    ))}
                </View>)
        } else {
            return (
                <View>
                    {item.content.length == 0 ? <View>
                        <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', alignItems: 'center', flexDirection: 'column', textAlign: 'center', height: height - 130 }}>
                            <Image style={[styles.noResult]} source={require('../static/img/no_result.png')} />
                            <Text style={{ textAlign: 'center', fontSize: 15, marginTop: 15 }}>这里空空如也，快去收藏看看</Text>
                        </View>
                    </View> : item.content.map((itemChild, index) => (
                        <View key={'menu' + index} style={{ marginHorizontal: 20, marginVertical: 10, paddingHorizontal: 20, paddingTop: 20, borderWidth: 1, borderColor: '#ddd', height: 130, borderRadius: 5 }}>
                            <View style={{ height: 58 }}>
                                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                                    <View>
                                        <Text style={{ fontSize: 15, height: 18 }}>{itemChild.title}</Text>
                                        <Text style={{ fontSize: 12, height: 15, marginTop: 10, color: '#bbb' }}>{itemChild.time}</Text>
                                    </View>
                                    <TouchableOpacity  onPress={() => {
                                        this.refs.dialog._setModalVisible(true);
                                    }}>
                                        <Image style={styles.tabImg} source={require('../static/img/qrcode.png')} />
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <DashSecondLine backgroundColor='#ddd' len={60} width={width - 80}></DashSecondLine>
                            <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
                                <TouchableOpacity onPress={() => { item.content.splice(index, 1); _this.setState({ collect: item }) }}>
                                    <Text>取消收藏</Text>
                                </TouchableOpacity>
                                <Text onPress={() => { _this.props.navigation.navigate('Details') }}>查看详情</Text>
                            </View>
                        </View>
                    ))}
                </View>)
        }
    }

    render() {
        let { justifyItem, indicatorType, indicatorPosition, animated, autoScroll, custom, activeIndex } = this.state;
        var barItems = [];
        barItems.push(this.state.history);
        barItems.push(this.state.collect);
        console.log(barItems)
        return (
            <View>
                <Header title="我的二维码"></Header>
                <SegmentedBar
                    justifyItem={justifyItem}
                    indicatorType={indicatorType}
                    indicatorPosition={indicatorPosition}
                    indicatorLineColor={'#00ff00'}
                    indicatorLineWidth={custom ? 1 : undefined}
                    indicatorPositionPadding={custom ? 3 : undefined}
                    animated={animated}
                    autoScroll={autoScroll}
                    activeIndex={activeIndex}
                    onChange={index => this.onSegmentedBarChange(index)}
                >
                    {barItems.map((item, index) => { return (<SegmentedBar.Item key={'item' + index} active={activeIndex == index} title={item.title} />) })}
                </SegmentedBar>
                <Carousel
                    style={styles.carousel_style}
                    carousel={false}
                    startIndex={activeIndex}
                    cycle={false}
                    ref='carousel'
                    onChange={index => this.onCarouselChange(index)}
                >
                    {barItems.map((item, index) => (
                        <ScrollView key={'view' + index}>
                            {this.getContent(item, this)}
                        </ScrollView>
                    ))}
                </Carousel>
                <CodeDetail  ref="dialog"/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    tabImg: {
        width: 30,
        height: 30,
    },
    noResult: {
        width: 100,
        height: 100,
    },
    headImg: {
        width: 40,
        height: 50,
    },
    listContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 60,
        paddingLeft: 20,
        paddingRight: 20,
        borderBottomWidth: 1,
        borderBottomColor: "#ddd"
    },
    textContainer: {
        flexDirection: 'column',
        alignItems: 'flex-start',
        height: 60,
        marginLeft: 20,
    },
    item: {
        marginLeft: 20,
        marginRight: 20,
    },
    carousel_style: {
        backgroundColor: '#fff',
        height: height - 80,
        borderTopWidth: 1,
        borderTopColor: '#f8f8f8'
    }
})