'use strict';
import React from 'react';

import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
    PixelRatio,
} from 'react-native';

import Immutable, {Map} from 'immutable';
import ProductListCell from '../../../common/components/ListCell/ProductListCell';
import MineListHeader from './MineListHeader';

export default class MineList extends React.Component {
    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);
        this._onChangeVisibleRows = this._onChangeVisibleRows.bind(this);
        this._onMomentumScrollBegin = this._onMomentumScrollBegin.bind(this);
        this._onMomentumScrollEnd = this._onMomentumScrollEnd.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });

        this.state = {
            selectedVisibleIndex: -1,
            scrollEnd: false,
        };

    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
        let {
            productListForMineCenter,
        } = this.props;
        let similarIndex = productListForMineCenter.similarIndex;
        let showSimilarGuider = this.props.showSimilarGuider
            && this.state.scrollEnd
            && rowID == this.state.selectedVisibleIndex
            && rowID != similarIndex;
        return (
            <ProductListCell
                style={[styles.listContainer, customStyle]}
                key={'row' + rowID}
                rowID={rowID}
                data={rowData}
                similarIndex={similarIndex}
                onPressProduct={this.props.onPressProductListProduct}
                onLongPressProduct={this.props.onLongPressProduct}
                onPressFindSimilar={this.props.onPressFindSimilar}
                onPressDislike={this.props.onPressDislike}
                showSimilarGuider={showSimilarGuider}
            />
        );
    }

    _renderHeader() {
        return (
            <MineListHeader
                isNeedShowXsrz={this.props.isNeedShowXsrz}
                channel={this.props.channel}
                profile={this.props.profile}
                mineInfoNum={this.props.mineInfoNum}
                redPackageNum={this.props.redPackageNum}
                onPressItem={this.props.onPressItem}
                activityListInfo={this.props.activityListInfo}
                memberBill={this.props.memberBill}
                showRedPacket={this.props.showRedPacket}
                certificationInfo={this.props.certificationInfo}
                announcement={this.props.announcement}
                globalOrderData={this.props.globalOrderData}
                iconAll={this.props.iconAll}
                instalmentStatus={this.props.instalmentStatus}
                mineResource={this.props.mineResource}
                onPressFloorItem={this.props.onPressFloorItem}
            />
        );
    }

    _onChangeVisibleRows(visibleRows, changedRows) {
        if (Object.keys(visibleRows).length == 0) {
            return;
        }

        let selectedIndex = -1;
        let sectionIDs = Object.keys(visibleRows);
        let targetSection = 's1';
        if (!sectionIDs.includes(targetSection)) {
            return;
        }

        let rowIndexs = Object.keys(visibleRows[targetSection]);
        if (rowIndexs.length > 0) {
            selectedIndex = rowIndexs[0];
        }
        if (rowIndexs.length > 3) {
            selectedIndex = rowIndexs[2];
        }

        this.setState({selectedVisibleIndex: selectedIndex});
    }

    _onMomentumScrollBegin(event) {
        this.setState({scrollEnd: false});
    }

    _onMomentumScrollEnd(event) {
        this.setState({scrollEnd: true});
    }

    render() {
        let {
            isFetching,
            productListForMineCenter,
            mineCenterInfo,
            profile,
            mineInfoNum,
            redPackageNum,
            activityListInfo,
            memberBill,
            showRedPacket,
            certificationInfo,
            announcement,
            globalOrderData
        } = this.props;

        let dataSource = productListForMineCenter.product_list.toArray();

        return (
            <View style={styles.container}>

                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    yh_viewVisible = {true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(dataSource)}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}
                    onScroll={(event) => {
                        // console.log('onScrollonScrollonScroll')
                        // console.log(event.nativeEvent.contentOffset.y)
                        ReactNative.NativeModules.YH_MineHelper.updateNavBarState(event.nativeEvent.contentOffset.y);
                    }}
                    onScrollEndDrag={(event) => {
                        if (profile.uid != '0' && Platform.OS === 'ios' && event.nativeEvent.contentOffset.y < -60) {
                            this.props.onMineCenterRefresh && this.props.onMineCenterRefresh();
                            this.props.getProductListForMineCenter && this.props.getProductListForMineCenter();
                        }
                    }}
                />
            </View>
        );
    }
};

let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },

    contentContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listContainer: {
        width: width / 2,
    },
    top_bar: {
        position: 'absolute',
        flexDirection: 'row',
        alignItems: 'center',
        height: 44,
        left: 0,
        top: 0,
        width: width,
    },
    dot: {
        position: 'absolute',
        right: 0,
        top: 0,
        height: 9,
        width: 9,
    }
});