'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Button from "apsl-react-native-button";
import {Actions} from "react-native-router-flux";

import Immutable, {List} from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';

const {
    Component,
} = React;

const {
    View,
    Text,
    ListView,
    StyleSheet,
    TouchableHighlight,
    Dimensions,
    InteractionManager,
} = ReactNative;

export default class SideMenu extends React.Component {

    static propTypes = {
        items: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                shopName:React.PropTypes.string,
                shopsId: React.PropTypes.number,
            })
        ),
        onPressItem: React.PropTypes.func,
    };

    constructor(props, context) {
        super(props);

        this._renderHeader = this._renderHeader.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);
        this._renderRow = this._renderRow.bind(this);
        this._pressRow = this._pressRow.bind(this);
        this.drawer = context.drawer;
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)});
    }

    _pressRow(rowData) {
        this.props.onPressItem && this.props.onPressItem(rowData);
    }

    _renderHeader(sectionData, sectionID) {
        return (
            <Text style={styles.header}>
                店铺切换
            </Text>
        );
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View style={styles.separator} key={rowID}/>
        );
    }

    _renderRow(rowData, sectionID, rowID) {

        return (
            <TouchableHighlight
                onPress={() => {
                    this.drawer.close();
                    InteractionManager.runAfterInteractions(() => {this._pressRow(rowData)});
                }}
                underlayColor={'white'}
                key={rowID}
            >
                <View style={styles.row} >
                    <Text style={styles.text}>
                        {rowData.get('shopName')}
                    </Text>
                </View>
            </TouchableHighlight>
        );
    }

    render(){
        return (
            <View style={[styles.container]}>
                <View style={styles.statusBar} />
                <View style={styles.listContainer}>
                    <ListView
                        contentContainerStyle={styles.contentContainer}
                        dataSource={this.ds.cloneWithRows(this.props.items.toArray())}
                        renderHeader={this._renderHeader}
                        renderSeparator={this._renderSeparator}
                        renderRow={this._renderRow}
                        enableEmptySections={true}
                    />
                </View>
            </View>
        );
    }
}

SideMenu.contextTypes = {
    drawer: React.PropTypes.object
};

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#F0F0F0",
    },
    statusBar: {
        backgroundColor: '#3E3E3E',
        paddingTop: 0,
        top: 0,
        height: 20,
        right: 0,
        left: 0,
        position: 'absolute',
    },
    listContainer: {
        top: 20,
        height: height - 20,
    },
    contentContainer: {
        backgroundColor: 'white',
    },
    header: {
        fontSize: 18,
        color: '#B0B0B0',
        top: 10,
        right: 15,
        height: 28,
        alignSelf: 'flex-end',
        backgroundColor: 'transparent',
    },
    separator: {
        height: 1,
        backgroundColor: '#E0E0E0',
    },
    row: {
        height: 65,
        justifyContent: 'center',
        backgroundColor: 'transparent',
    },
    text: {
        fontSize: 18,
        color: '#444444',
        fontWeight: 'bold',
        left: 14,
        marginRight: 14,
    },
});