import React, { Component } from 'react'
import { View } from 'react-native'
import Switch_notification from './Switch_notification'
import { BackgroundImage } from '../../components/BackgroundImage'
import Text from '../../components/Text';
import LinearGradient from 'react-native-linear-gradient';
import { Badge, } from 'native-base'
import { bindActionCreators } from 'redux'
import { appCleanToken, appCleanUser } from '../../redux/app/action'
import { connect } from 'react-redux'
import { getSubscription, postSubscription } from "../../api/UserApi";
import { t } from '../../utils/i18n';

class SettingsNotificationScreen extends Component {

  constructor(props) {
    super(props)
    console.log('user => ',this.props)
    this.state = {
      auth: false,
      isSwitchNews: false,
      isSwitchPromotion: false,
      isSwitchDelivery: false,
      isSwitchPaymnt: false
    }
    this.toggleSwitch = this.toggleSwitch.bind(this)
  }

  componentDidMount() {
    if (this.props.token != null && this.props.user != null) {
      this.getSubscriptionUser()
      this.setState({
        auth: true
      })
    } else {
      this.setState({
        auth: false
      })
    }
  }
  componentWillReceiveProps() {
    if (this.props.token != null && this.props.user != null) {
      this.setState({
        auth: true,
      })
    } else {
      this.setState({
        auth: false
      })
    }
  }

  getSubscriptionUser(){
    getSubscription(this.props.user.id, this.props.type)
    .then(res => {
      this.setState({
        isSwitchNews: res.data.is_receive_news,
        isSwitchPromotion: res.data.is_receive_promotion,
        isSwitchDelivery: res.data.is_receive_delivery,
        isSwitchPaymnt: res.data.is_receive_payment
      })
    })
  }

  toggleSwitch(customerId,switchType){
    console.log('select toggle type ------------> ',switchType)
    postSubscription(customerId,switchType)
    switch(switchType){
      case 'news':
        this.setState({
          isSwitchNews: !this.state.isSwitchNews
        })
        break;
      case 'promotion':
          this.setState({
            isSwitchPromotion: !this.state.isSwitchPromotion
          })
        break;
      case 'delivery':
          this.setState({
            isSwitchDelivery: !this.state.isSwitchDelivery
          })
        break;
      case 'payment':
          this.setState({
            isSwitchPaymnt: !this.state.isSwitchPaymnt
          })
        break;
    }
  }

  render() {
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <BackgroundImage>
          <View style={{ height: '100%' }}>
            <View style={{ backgroundColor: '#ffffff' }}>
              <View style={styles.box_setting_style}>
                <View style={{ width: '90%' }}>
                  <Text style={{ color: '#00420A' }}>{t('news2')}</Text>
                </View>
                <View style={{ width: '10%' }}>
                  <Switch_notification customer={this.props.user != null ? this.props.user.id:this.props.device.customer_id} type={'news'} isSwitch={this.state.isSwitchNews} onToggle={this.toggleSwitch}/>
                </View>
              </View>
              <View style={styles.box_setting_style}>
                <View style={{ width: '90%' }}>
                  <Text style={{ color: '#00420A' }}>{t('promotion')}</Text>
                </View>
                <View style={{ width: '10%' }}>
                  <Switch_notification customer={this.props.user != null ? this.props.user.id:this.props.device.customer_id} type={'promotion'} isSwitch={this.state.isSwitchPromotion} onToggle={this.toggleSwitch}/>
                </View>
              </View>
              {this.state.auth == true ? <View style={styles.box_setting_style}>
                <View style={{ width: '90%' }}>
                  <Text style={{ color: '#00420A' }}>{t('parcel_list')}</Text>
                </View>
                <View style={{ width: '10%' }}>
                  <Switch_notification customer={this.props.user != null ? this.props.user.id:this.props.device.customer_id} type={'delivery'} isSwitch={this.state.isSwitchDelivery} onToggle={this.toggleSwitch}/>
                </View>
              </View> : null}
              {this.state.auth == true ? <View style={styles.box_setting_style}>
                <View style={{ width: '90%' }}>
                  <Text style={{ color: '#00420A' }}>{t('payment_due')}</Text>
                </View>
                <View style={{ width: '10%' }}>
                  <Switch_notification customer={this.props.user != null ? this.props.user.id:this.props.device.customer_id} type={'payment'} isSwitch={this.state.isSwitchPaymnt} onToggle={this.toggleSwitch}/>
                </View>
              </View> : null}
            </View>
          </View>
        </BackgroundImage>
      </LinearGradient>
    )
  }
}

const styles = {
  box_setting_style: {
    flexDirection: 'row',
    height: 25,
    display: 'flex',
    alignItems: 'center',
    margin: 10
  }
}
const mapDisPatchToProps = state => {
  return state.app
}
const redux_connect = dispatch => bindActionCreators({ }, dispatch)
export default connect(mapDisPatchToProps, redux_connect)(SettingsNotificationScreen)