'use strict';

import React, {Component} from 'react';
import {Dimensions, ListView, StyleSheet, Text, View, TouchableOpacity, Image, SectionList} from 'react-native';

import {Immutable, default as Immutables} from 'immutable';
import GuideModal from "./GuideModal";
import Focus from './floor/Focus';
import SingleImage from './floor/SingleImage';
import ImageFour from "./cell/ImageFour";
import ImageTwo from "./cell/ImageTwo";
import ProductCell from './recommend/ProductCell';
import CategorySelector from './recommend/CategorySelector';
import EditorTalk from './cell/EditorTalk';

let hotRecommend = Immutables.fromJS({
    count: "8",
    order_by: "100",
    sort_name: "热门推荐",
    sort_id: "0"
});

export default class Home extends Component {
    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderSectionHeader = this._renderSectionHeader.bind(this);
        this._floorCellRender = this._floorCellRender.bind(this);
        this._clickCategorySelector = this._clickCategorySelector.bind(this);

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

    _renderSectionHeader({ section: { title } }) {
        switch (title) {
            case 'categoryList': {
                let { productList } = this.props.data;
                let selectedCategoryIndex = productList.selectedCategoryIndex;
                let categoryList = productList.msort_list.unshift(hotRecommend);
                return (
                    <CategorySelector
                        data={categoryList}
                        selectedCategoryIndex={selectedCategoryIndex}
                        changeCategorySelectorTitle={this._clickCategorySelector}
                        onPressCategory={(rowData, rowID) => {
                            this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
                        }}
                    />
                );
            }
            default:
                return null;
        }
    }

    _clickCategorySelector(rowData) {
        let params = {
            animated: true,
            sectionIndex: 1,
            itemIndex: 0,
            viewOffset: 44
        }
        this.sectionList.scrollToLocation(params);
    }

    _renderRow(item) {
        let rowID = item.index;
        let rowData = item.item;

        let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};

        switch (item.section.title) {
            case 'resourceList': {
                return this._floorCellRender(rowData, rowID);
            }
            case 'productListTitle': {
                return (
                    <View>
                        <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                        <View style={styles.withdrawView}>
                            <Text style={[styles.hasWithDrawText, {fontWeight: 'bold'}]}>推荐商品</Text>
                        </View>
                        <View style={styles.titleBottomLine}/>
                    </View>
                )
            }

            case 'categoryList': {
                return (
                    <ProductCell
                        style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressProduct={this.props.onPressProduct}
                    />
                );
            }

            default:
                return null;
        }
    }

    _floorCellRender(rowData, rowID) {

        if (!rowData || !rowData.get('data')) {
            return null;
        }

        let template_name = rowData.get('template_name');
        switch (template_name) {
            case 'focus': {
                return (
                    <Focus
                        data={rowData.get('data')}
                        height={140}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    />
                );
            }
            case 'newSingleImage': {
                let imageHeight = rowData.get('data').toJS().imageHeight;
                return (
                    <SingleImage
                        style={imageHeight> 100 ? {marginLeft: 15, marginRight: 15, width: width-30}: {}}
                        data={rowData}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    />
                );
            }
            case 'image_list': {
                return (
                    <ImageFour
                        resource={rowData.get('data')}
                        jumpWithUrl={this.props.jumpWithUrl}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    />
                );
            }
            case 'twoPicture': {
                return (
                    <ImageTwo
                        resource={rowData}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    />
                );
            }
            case 'editorTalk': {
                return (
                    <EditorTalk 
                        htmlcontent={this.props.data.inviteCode}
                        resource={rowData}
                        image={require('../images/invitecode.png')}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}     
                    />
                )
            }
            default:
                return null;
        }

    }

    render() {
        let {
            resourceInfo,
            data,
        } = this.props;


        let dataSource = [
            {title: 'resourceList', data: resourceInfo.resourceList ? resourceInfo.resourceList.toArray() : []},
            {title: 'categoryList', data: data.productList.product_list ? data.productList.product_list.toArray() : []},
        ];
        let productList = data.productList.product_list ? data.productList.product_list.toArray() : [];

        return (
            <View style={styles.container}>
                <GuideModal
                    isShowGuide={this.props.isShowGuide}
                    hiddenGuideDialog={this.props.hiddenGuideDialog}/>
                <SectionList
                    stickySectionHeadersEnabled={true}
                    ref={(ref) => this.sectionList = ref}
                    sections={dataSource}
                    renderSectionHeader={this._renderSectionHeader}
                    yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    renderItem={this._renderRow}
                    onEndReached={() => {
                        if (productList && productList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                    keyExtractor={(item, index) => {
                        return index
                    }}
                />
            </View>
        );
    }

}


let { width } = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        withdrawView: {
            width: width,
            height: 44,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            paddingLeft: 15,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        hasWithDrawText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#444444',
        },
        titleBottomLine: {
            width: width,
            height: 0.5,
            backgroundColor: '#e0e0e0'
        },
        contentContainer: {
            flexDirection: 'column',
            backgroundColor: 'white'
        },
        listContainer: {
            width: width,
        },
    })
;