'use strict';

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

import LoadingIndicator from '../../../common/components/LoadingIndicator';
import ProductCell from './ProductCell';
import CategorySelector from './CategorySelector';
import Immutables,{Immutable} from "immutable";
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 Recommend extends Component {

    constructor(props) {
        super(props);

        this.renderRow = this.renderRow.bind(this);

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

        this.listView = null;
    }

    renderRow(rowData, sectionID, rowID) {
        let sliderHeight = 118 * DEVICE_WIDTH_RATIO;
        let imageUrl = YH_Image.getSlicedUrl(this.props.src, width, sliderHeight, 2);
        switch (sectionID) {
            case 'resourceList': {
                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}}
                        />
                    </TouchableOpacity>
                );
            }
            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.listView && this.listView.scrollTo({x: 0, y: 0, animated: false});
                            this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
                        }}
                    />
                );
            }
            case 'productList': {
                return (
                    <ProductCell
                        key={'row' + rowID}
                        data={rowData}
                        onPressProduct={this.props.onPressProduct}
                    />
                );
            }
            default:
                return null;
        }
    }

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

        let isLoading = (productList.size === 0);
        let showList = productList.size > 0;

        let dataSource = {
            resourceList: this.props.src ? ['resourceList'] : [],
            categoryList: productList.msort_list ? ['1'] : [],
            productList: productList.product_list ? productList.product_list.toArray() : [],
        };
        return (
            <View style={styles.container}>
                <LoadingIndicator isVisible={isLoading}/>
                {showList ? <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    enableEmptySections={true}
                    yh_viewVisible={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    onEndReached={() => {
                        if (productList && productList.size > 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                /> : null}
            </View>
        );
    }
}

let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    placeholder: {
        width,
        height: 15,
    },
});