import React, {Component} from 'react';
import {StyleSheet, View, ListView} from 'react-native';
import {
    Container,
    Content,
    Header,
    Left,
    Right,
    Body,
    Title,
    Button,
    Text,
    Icon,
    Spinner
} from 'native-base';

import CONSTANT from '../../Constant';
import Items from './item';
import GridView from 'react-native-grid-view';
var REWARD_PER_ROW = 3;

import Pusher from 'pusher-js/react-native';

var pusher = new Pusher('xxxxxxxxxxxx');
var channel = pusher.subscribe('xxxxxx');
var dataSourceObj = [];



export default class Reward extends Component {

	 let something = this;
    constructor(props) {
        super(props);
        this.state = {
            dataSource: null,
            loaded: false,
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch(CONSTANT.API_URL, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                status_active: 0,
                user_token: '1',
                device_id: 1,
            })
        })
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    dataSource: responseJson.data.stage_bid,
                    loaded: true,
                });
                dataSourceObj = responseJson.data.stage_bid;
                console.log(responseJson.data.stage_bid);
            })
            .catch((error) => {
                console.error(error);
            });
    }

    render() {

        channel.bind('Production_bid_91',function(response){
            console.log(response);


            dataSourceObj[0]['winner_user_name'] = response.winner_user_name;
            // console.log(dataSourceObj[0]['winner_user_name']);


            // something.state.dataSource = dataSourceObj;
            something.setState({
                dataSource:  dataSourceObj,
                loaded: true,
            });
        })

        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <GridView
                items={this.state.dataSource}
                itemsPerRow={REWARD_PER_ROW}
                renderItem={this.renderReward}
            />
        )
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Spinner />
            </View>
        );
    }

    renderReward(reward) {
        return (
            <Items
                item={reward}
                key={reward.item_id}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});