import React, { Component } from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
} from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import {Map} from 'immutable';
import * as couponActions from '../reducers/coupon/couponActions';
import CouponList from '../components/coupon/CouponList';
import CouponTabs from '../components/coupon/CouponTabs';
import Prompt from '../components/coupon/Prompt';
import SingleImage from '../../coupon/components/common/SingleImage';
import ReactNative from "react-native";
import YH_Image from "../../common/components/YH_Image";
const DEVICE_WIDTH_RATIO = Dimensions.get('window').width / 375;
const { width } = Dimensions.get('window');

const actions = [
  couponActions,
];

function mapStateToProps(state) {
  return {
      ...state
  };
}

function mapDispatchToProps(dispatch) {

  const creators = Map()
      .merge(...actions)
      .filter(value => typeof value === 'function')
      .toObject();

  return {
      actions: bindActionCreators(creators, dispatch),
      dispatch
  };
}

class CouponListContainer extends Component {
  constructor(props) {
    super(props);
    props.actions.fetchResourceCode();
    props.actions.getCouponNums();
    props.actions.getCouponList('notuse', true);
    props.actions.getCouponList('use', true);
    props.actions.getCouponList('overtime', true);
  }

    _resourceJumpWithUrl = (url, type, params) => {
        if (!url) {
            return;
        }
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }


    renderImageJoin = (item) => {
        {/*<SingleImage*/}
            // data={singleImageData}
            // resourceJumpWithUrl={this._resourceJumpWithUrl} />

        item = item && item.toJS();
        let imageUrl = '', jumurl = '';
        let picWdith = 0, picHeight = 0
        if (item.template_name === 'splitJointImg' && item.data) {
            imageUrl = item.data.src;
            jumurl = item.data.urls && item.data.urls[0]
            let imageWidth = item.image_width;
            let imageHeight = item.image_height;
            picWdith = DEVICE_WIDTH_RATIO * imageWidth
            picHeight = DEVICE_WIDTH_RATIO * imageHeight
        }

        return (
            <TouchableOpacity style={{width: width, height: picHeight, alignItems: 'center', backgroundColor: '#f0f0f0', paddingTop: 10}} activeOpacity={1} onPress={() => {
                jumurl && this._resourceJumpWithUrl(jumurl)
            }}>
            <YH_Image url={YH_Image.getSlicedUrl(imageUrl, picWdith, picHeight, 2)} resizeMode={'stretch'} style={{ width: picWdith, height: picHeight}}/>
            </TouchableOpacity>
        )

    }

  state = {couponCode: '', selectedTab: 0, showFilter: false, selectedFilter: 0}

  render() {
    const { showFilter, selectedFilter } = this.state;
    const { couponNums, notuse, use, overtime, showSuccessTip, resourceInfo } = this.props.coupon;
    let singleImageData =  resourceInfo.get('resourceList').first()
    return (
      <View style={styles.container}>
        <ScrollableTabView
          onChangeTab={this.onChangeTab}
          renderTabBar={() => <CouponTabs couponNums={couponNums} selectTab={this.selectTab} showFilter={this.state.showFilter}/>}
        >


          <View style={styles.container} tabLabel="未使用">

            <View style={styles.bindCouponContainer}>
              <TextInput
                style={styles.textInput}
                onChangeText={text => this.setState({couponCode: text})}
                placeholder="请输入优惠券码"
                underlineColorAndroid="transparent"
              />
              <TouchableOpacity
                onPress={this.bindCoupon}
                style={[styles.bindCouponBtn, this.state.couponCode.length > 0 && styles.blackBack]}
              >
                <Text style={styles.bindCouponText}>兑换</Text>
              </TouchableOpacity>
            </View>

              {/*{singleImageData ?this.renderImageJoin(singleImageData): null }*/}

            <CouponList resourceJumpWithUrl ={this._resourceJumpWithUrl} isFetching={notuse.isFetching} data={notuse.list} onEndReached={() => this.props.actions.getCouponList('notuse')} type="notuse" singleImageData={singleImageData}/>
          </View>
          <View style={styles.container} tabLabel="已使用">
            <CouponList isFetching={use.isFetching} data={use.list} onEndReached={() => this.props.actions.getCouponList('use')} type="use"/>
          </View>
          <View style={styles.container} tabLabel="已失效">
            <CouponList isFetching={overtime.isFetching} data={overtime.list} onEndReached={() => this.props.actions.getCouponList('overtime')} type="overtime"/>
          </View>
        </ScrollableTabView>
        {showSuccessTip ? <Prompt
          text={showSuccessTip}
          duration={800}
          onPromptHidden={this._onPromptHidden}
          /> : null}
        {showFilter ? <View style={styles.filterContianer}>
          <View style={styles.filterTabs}>
            {notuse.filters && notuse.filters.map((item, index) => {
              return (
                <TouchableOpacity
                  activeOpacity={0.9}
                  key={index}
                  style={[styles.filterTab, (selectedFilter == item.filter_id) && styles.selectedFilterTab]}
                  onPress={() => this.pressFilter(item.filter_id)}>
                  <Text style={[styles.filterText, (selectedFilter == item.filter_id) && styles.selectedFilterText]}>{item.filter_name}</Text>
                </TouchableOpacity>
              )
            })}
          </View>
          <TouchableOpacity style={styles.container} onPress={() => this.setState({showFilter: false})} />
        </View> : null}
      </View>
    )
  }

  selectTab = i => {
    if (i == 0 && this.state.selectedTab == 0) {
      this.setState({showFilter: !this.state.showFilter});
      return false;
    } else {
      return true;
    }
  }

  onChangeTab = tab => {
    const { i } = tab;
    let { showFilter } = this.state;
    if (i != 0) {
      showFilter = false;
    }
    this.setState({selectedTab: i, showFilter});
  }

  bindCoupon = () => {
    this.props.actions.bindCoupon(this.state.couponCode);
  }

  pressFilter(filter_id) {
    if (this.state.selectedFilter == filter_id) {
      return
    }
    this.props.actions.getCouponList('notuse', true, filter_id);
    this.setState({selectedFilter: filter_id, showFilter: false});
  }

  _onPromptHidden = () => {
    this.props.actions.promptHidden();
  }

  _onNetPromptHidden() {
    this.props.actions.netPromptHidden();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bindCouponContainer: {
    height: 45,
    paddingHorizontal: 10,
    paddingVertical: 8,
    flexDirection: 'row',
  },
  textInput: {
    flex: 1,
    height: 30,
    marginRight: 10,
    fontSize: 12,
    padding: 0,
    paddingLeft: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 2,
  },
  bindCouponBtn: {
    width: 60,
    height: 30,
    backgroundColor: '#b0b0b0',
    borderRadius: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  blackBack: {
    backgroundColor: '#444444',
  },
  bindCouponText: {
    fontSize: 14,
    color: '#ffffff',
  },
  filterContianer: {
    position: 'absolute',
    top: 45,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.4)'
  },
  filterTabs: {
    height: 65,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  filterTab: {
    width: 73,
    height: 33,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  selectedFilterTab: {
    backgroundColor: '#444444'
  },
  filterText: {
    fontSize: 14,
    color: '#444444',
  },
  selectedFilterText: {
    color: '#ffffff',
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(CouponListContainer);