import React, { Component } from 'react';
import {
  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';

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.getCouponNums();
    props.actions.getCouponList('notuse', true);
    props.actions.getCouponList('use', true);
    props.actions.getCouponList('overtime', true);
  }

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

  render() {
    const { showFilter, selectedFilter } = this.state;
    const { couponNums, notuse, use, overtime, showSuccessTip } = this.props.coupon;
    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>
            <CouponList isFetching={notuse.isFetching} data={notuse.list} onEndReached={() => this.props.actions.getCouponList('notuse')} type="notuse"/>
          </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);