'use strict';

import React, {Component} from 'react';
import {Dimensions, ListView, StyleSheet, Text, View, TouchableOpacity, Image} 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 YH_Image from '../../common/components/YH_Image';

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._floorCellRender = this._floorCellRender.bind(this);

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

    _renderRow(rowData, sectionID, rowID) {
        let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};
        let sliderHeight = 111 * DEVICE_WIDTH_RATIO;
        let imageUrl = YH_Image.getSlicedUrl(this.props.src, width, sliderHeight, 2);
        switch (sectionID) {
            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 'productList': {
                return (
                    <ProductCell
                        style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressProduct={() => this.props.onPressProduct(rowData)}
                    />
                );
            }

            case 'categoryList': {


                let {productList} = this.props.data;
                let selectedCategoryIndex = productList.selectedCategoryIndex;
                let categoryList = productList.msort_list.unshift(hotRecommend);
                return (
                    <CategorySelector
                        data={categoryList}
                        selectedCategoryIndex={selectedCategoryIndex}
                        onPressCategory={(rowData, rowID) => {
                            this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
                        }}
                    />
                );
            }

            case 'productBanner': {
                return (
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{width: width, height: sliderHeight,}}
                        onPress={() => {
                            this.props.resourceJumpWithUrl && this.props.resourceJumpWithUrl(this.props.jumpUrl);
                        }}
                    >
                        {/*<YH_Image*/}
                            {/*url={imageUrl}*/}
                            {/*style={{width: width, height: sliderHeight}}*/}
                        {/*/>*/}
                        <Image source={require('../images/invitecode.png')} style={{width: width, height: sliderHeight,position:'absolute', marginTop: 0, marginBottom:0}}/>
                        <Text style={styles.bannerMainTitle}>"潮口令"</Text>
                        <Text style={styles.bannerSubTitle}>邀请好友获50元现金无限赚</Text>
                        <Text style={styles.bannerContext}>已经有1700人参与到好友邀请,获得了94张优惠券,快来加入！</Text>
                    </TouchableOpacity>
                )
            }
            default:
                return null;
        }
    }

    _floorCellRender(rowData, rowID) {

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

        let template_name = rowData.get('template_name');
        // console.log(`templatename: ${template_name}`);
        switch (template_name) {
            case 'focus': {
                return (
                    <Focus
                        data={rowData.get('data')}
                        height={140}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    />
                );
            }
            case 'newSingleImage': {
                return (
                    <SingleImage
                        data={rowData.get('data')}
                        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.get('data')}
                        resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    />
                );
            }
            default:
                return null;
        }

    }

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


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

        // dataSource.resourceList && console.log(`=============>homelist: ${dataSource.resourceList}`)
        // data.productList.product_list.size >0 && (console.log(`==========>home`) || console.log(this.dataSource.cloneWithRowsAndSections(dataSource)));
        return (
            <View style={styles.container}>
                <GuideModal
                    isShowGuide={this.props.isShowGuide}
                    hiddenGuideDialog={this.props.hiddenGuideDialog}/>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    onEndReached={() => {
                        if (productList && productList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                />
            </View>
        );
    }

}


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

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: 'row',
            flexWrap: 'wrap',
            backgroundColor: 'white'
        },
        listContainer: {
            width: width,
        },
        bannerMainTitle: {
            fontFamily: 'SourceHanSansCN-Bold',
            fontSize: 16,
            color: '#000000',
            textAlign:'center',
            marginTop:28,
        },
        bannerSubTitle: {
            fontFamily: 'SourceHanSansCN-Bold',
            fontSize:12,
            color: '#000000',
            textAlign:'center',
            marginTop:19,
        },
        bannerContext: {
            fontFamily: ' SourceHanSansCN-Medium;',
            fontSize:9,
            color: '#000000',
            textAlign:'center',
            marginTop:6,
        }
    })
;