import React, { Component } from 'react'
import { View, Text, TouchableHighlight, StyleSheet, TouchableOpacity, Image, Slider } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import NaviBar from '../../components/navi-bar';
import history from "../../common/history";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import SliderWidget from '../../components/slider-widget';
import Icon from "react-native-vector-icons/FontAwesome5";
import { colors } from "../../assets/styles/colors-theme";
import { Fonts } from '../../assets/styles/fonts-theme'
import CommonTextInput from '../../components/commonTextInput'
import { inject, observer } from "mobx-react";
import { observable } from 'mobx'
import BackHeader from '../../components/backHeader'
import { width, height } from "../../common/screen";
import Size from "../../common/size";
const size = new Size();



@inject("appStore")
@observer
export default class Payment extends Component {
  @observable sliderBgValue = 1
  @observable sliderValue = 1
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  showSliderBgValueFun = (value) => {
    this.sliderBgValue = value
    console.log(value)
  }

  textreturn() {
    return this.sliderValue * 10
  }

  render() {
    const thirdPartyLoginButtons = [{ text: this.store.text.googleLogin, icon: 'google', color: '#2D9AFF', which: 'google' },
    { text: this.store.text.facebookLogin, icon: 'facebook-square', color: '#295BA2', which: 'facebook' },
    { text: this.store.text.wechatLogin, icon: 'weixin', color: '#00E86E', which: 'wechat' }]
    return (
      <View style={{ flex: 1 , backgroundColor: 'white',}}>
        <BackHeader instance={this} back={true} />
        <View style={{ marginTop: 60, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', marginRight: 20, marginLeft: 20,backgroundColor:'pink' }}>
          <View style={{ flex: 1 }}>
            <Text style={{ color: colors.textColor, fontFamily: Fonts.ubuntu, fontSize: 17 }}>
              {this.store.text.addToken}
            </Text>
          </View>
          <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
            <Text style={{ color: colors.textColor, fontFamily: Fonts.ubuntu, fontSize: 25 }}>
              {this.textreturn()}
            </Text>
            <Slider
              style={{ width: 150, height: 40 }}
              value={this.sliderValue}
              maximumValue={10}
              minimumValue={1}
              step={1}
              onValueChange={(value) => { this.sliderValue = value }}
              minimumTrackTintColor={colors.mainColor}
              maximumTrackTintColor="#DBE3E5"
              thumbTintColor={colors.mainColor}
            />
            <Text style={{ color: colors.textColor, fontFamily: Fonts.ubuntu, fontSize: 25 }}>
              {this.store.text.tokens}
            </Text>
          </View>
          <View style={{ flex: 1, alignItems: 'flex-end' }}>
            <Text style={{ color: colors.mainColor, fontFamily: Fonts.ubuntu, fontSize: 30 }}>
              {"$ " + this.sliderValue * 100}
            </Text>
          </View>
        </View>

        <View style={{ alignItems: 'center', }}>
          <View style={{ width: width - 40, backgroundColor: '#DBE3E5', height: 2, marginTop: 70 }} />
          <View style={{ width: width - 40, marginTop: 30 }}>
            <Text style={{ color: colors.textColor, fontFamily: Fonts.ubuntu, fontSize: 17 }}>
              {this.store.text.paymentGateway}
            </Text>
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 20 }}>
            <View style={[styles.gatewayBoxStyle, { marginRight: 40 }]}>
              <Icon name={'credit-card'} color={colors.mainColor} size={60} solid />
            </View>
            <View style={styles.gatewayBoxStyle}>
              <Icon name={'alipay'} color={colors.mainColor} size={60} />
            </View>
          </View>
          <View style={{
            marginTop:50,
            backgroundColor: colors.mainColor,
             width: width - 60, height: 60,
              borderRadius: 10, shadowColor: "#000",
              justifyContent: 'center',
              alignItems:'center',
            shadowOffset: {
              width: 0,
              height: 2,
            },
            shadowOpacity: 0.23,
            shadowRadius: 2.62,

            elevation: 4,
          }}>
            <Text style = {{color:'white',fontFamily:Fonts.ubuntu,fontSize:18}}>
              {this.store.text.ok}
            </Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.flatten({
  textView: {
    color: colors.textColor,
    fontFamily: Fonts.ubuntuL,
    fontSize: size.getSize(13),
  },
  buttonText: {
    color: "#fff"
  },
  buttonView: {
    backgroundColor: colors.mainColor,
    marginRight: 30,
    marginLeft: 30,
    marginTop: 10,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 15,
    fontFamily: Fonts.ubuntu,
    color: 'white',
  },
  gatewayBoxStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 120,
    height: 120,
    borderColor: colors.textColor, borderWidth: 1,
    borderRadius: 20,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.20,
    shadowRadius: 1.41,

    elevation: 2,
  }
});
