import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Share,
  Alert,
  Linking,
} from 'react-native';
var _ = require('lodash');
import Toast, { DURATION } from 'react-native-easy-toast';
import Switch from 'react-native-switch-pro';
import { width, height } from '../../services/screen';
import CustomLoginButon from '../../components/customLoginButton';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import Loading from '../../components/Loading';
import { inject, observer } from 'mobx-react';
import { colors } from '../../assets/styles/colors-theme';
import Rank from '../../components/rank';
import TitleBar from '../../components/titleBar';
import CustomLoginButton from '../../components/customLoginButton';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { observable } from 'mobx';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import * as Progress from 'react-native-progress';
import FeatherIcon from 'react-native-vector-icons/dist/Feather';
import FontAwesomeIcon from 'react-native-vector-icons/dist/FontAwesome';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';
import MaterialIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
//import Adyen from 'adyen-react-native';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
const { SlideInMenu } = renderers;
const langList = [
  { label: '中文', value: 'hk' },
  { label: 'English', value: 'en' },
];
const API_KEY =
  //'AQEhhmfuXNWTK0Qc+iSem3Y3qfffgjkjOauoEZcB7q2DToV3EMFdWw2+5HzctViMSCJMYAc=-kpW/CqOWAmOBWEEhFHdHKKV/dcUBco7qbCGV+/U6KDE=-F?6e&d8kq%7)?D6H';
  'AQEkhmfuXNWTK0Qc+iSem3Y3qffCENhaJNh8FEMlEb7DNf3Ae1UzEMFdWw2+5HzctViMSCJMYAc=-SmX/AHu3xTVV2+Uek0ZHC2MxuW1df26lENMn6T4DVPw=-f3A?_6;kbd&pgK4g';
const MERCHANT_ACCOUNT =
  //'NironsECOM';
  'Nirons983ECOM';

FontAwesomeIcon.loadFont();
@inject('appStore')
@observer
export default class RedeemGifts extends React.Component {
  @observable data = null;
  @observable points = 1000;
  @observable
  fakeGifts = [
    {
      id: 0,
      name: '百佳500元現金卷',
      points: 500,
      qty: 0,
    },
    {
      id: 1,
      name: '百佳300元現金卷',
      points: 300,
      qty: 0,
    },
    {
      id: 2,
      name: '百佳100元現金卷',
      points: 100,
      qty: 0,
    },
    {
      id: 3,
      name: '一田500元現金卷',
      points: 500,
      qty: 0,
    },
    {
      id: 4,
      name: '一田300元現金卷',
      points: 300,
      qty: 0,
    },
  ];

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  async componentWillMount() {
    this.store.getRedeemHistory()
  }

  async componentDidMount() {
    await this.store.getGiftList()
  }
  renderRemainPoints() {
    var value = _.cloneDeep(this.store.loginUserData.data.shoppingGroupPoints);
    this.store.gift.map((items, index) => {
      value -= items.qty * items.price;
    });
    return value;
  }

  addAction(item) {
    var value = _.cloneDeep(this.store.loginUserData.data.shoppingGroupPoints);
    this.store.gift.map((items, index) => {
      value -= items.qty * items.price;
    });
    console.log(value);
    value -= item.price;

    if (value >= 0) {
      item.qty += 1;
    }
  }

  async redeemAction() {
    var data = { items: [] }
    await this.store.gift.map(async (items, index) => {
      if (items.qty > 0) {
        var gift = { giftId: items.id, qty: items.qty }
        await data.items.push(gift)
      }
    })
    console.log(data)
    if (data.items.length > 0) {
      this.store.redeemGift(data, this);
    } else {
      this.refs.toast.show('Please Select the gifts')
    }
  }

  renderGifts() {
    return this.store.gift.map((items, index) => {
      return (
        <View
          style={{
            width: width,
            flexDirection: 'row',
            alignItems: 'center',
            marginBottom: 20,
          }}>
          <View
            style={{
              flex: 0.6,
              marginLeft: 20,
              justifyContent: 'center',
            }}>
            <Text style={[styles.pointsTextView, { fontSize: 20 }]}>
              {items.name}
            </Text>
            <Text style={[styles.labelText, { marginTop: 5 }]}>
              {'' + items.price + this.store.text.giftPoints}
            </Text>
          </View>
          <View
            style={{
              flex: 0.4,
              marginRight: 20,
              justifyContent: 'center',
              alignItems: 'flex-end',
            }}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                shadowColor: '#000',
                shadowOffset: {
                  width: 0,
                  height: 1,
                },
                shadowOpacity: 0.22,
                shadowRadius: 2.22,

                elevation: 3,
              }}>
              <View style={{ flexDirection: 'row' }}>
                <TouchableOpacity
                  onPress={() => {
                    if (items.qty > 0) {
                      items.qty -= 1;
                    }
                  }}
                  style={{
                    height: 50,
                    width: 25,
                    borderWidth: 1,
                    borderColor: colors.lineColor,
                    borderTopLeftRadius: 10,
                    borderBottomLeftRadius: 10,
                    backgroundColor: 'white',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      color: colors.mainColor,
                      fontWeight: '400',
                      fontSize: 20,
                    }}>
                    -
                  </Text>
                  {/* <Icon name = 'remove' color = 'white'/> */}
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    width: 45,
                    height: 50,
                    backgroundColor: 'white',
                    borderColor: colors.lineColor,
                    borderTopWidth: 1,
                    borderBottomWidth: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text style={{ fontSize: 15, fontWeight: '500' }}>
                    {items.qty}
                  </Text>
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => {
                    this.addAction(items);
                  }}
                  style={{
                    height: 50,
                    width: 25,
                    borderWidth: 1,
                    backgroundColor: 'white',
                    borderColor: colors.lineColor,
                    borderTopRightRadius: 10,
                    borderBottomRightRadius: 10,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      color: colors.mainColor,
                      fontWeight: '400',
                      fontSize: 20,
                    }}>
                    +
                  </Text>
                  {/* <Icon name = 'remove' color = 'white'/> */}
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      );
    });
  }

  render() {
    return (
      <MenuProvider
        style={{
          flex: 1,
          backgroundColor: colors.bgc,
        }}>
        <Loading loading={this.store.loading} />

        <View style={[styles.barAreaView]}>
        <TouchableOpacity
          style={{
          flex: 0.2,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onPress={() => {
          this.props.navigation.goBack();
        }}>
          <Ionicons name="ios-arrow-back" color={'black'} size={40} />
        </TouchableOpacity>

      <View
        style={{
          flex: 0.8,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{ fontSize: 22, fontWeight: '800' }}>
          {this.store.text.redeemGifts}
        </Text>
      </View>
      <TouchableOpacity
      onPress ={()=>{this.props.navigation.navigate('RedeemRecord')}}
        style={{
          flex: 0.2,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
          <Text style={{ fontSize: 14, color:colors.mainColor}}>
          {this.store.text.redeemRecord}
        </Text>

      </TouchableOpacity>
          </View >
      <View style={{ width: width, flexDirection: 'row', marginTop: 20 }}>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text style={styles.pointsTextView}>{'' + this.store.loginUserData.data.shoppingGroupPoints}</Text>
          <Text style={styles.labelText}>{this.store.text.yourPoints}</Text>
        </View>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text style={styles.pointsTextView}>
            {'' + this.renderRemainPoints()}
          </Text>
          <Text style={styles.labelText}>
            {this.store.text.remainingPoints}
          </Text>
        </View>
      </View>
      <View
        style={{
          width: width - 40,
          margin: 20,
          backgroundColor: colors.lineColor,
          height: 1,
        }}
      />
      <ScrollView>{this.renderGifts()}</ScrollView>
      <View style={{ width: width, justifyContent: 'center', alignItems: 'center' }}>
        <CustomLoginButon title={this.store.text.redeem} onPress={() => { this.redeemAction() }} />
      </View>
      <Toast
        ref="toast"
        style={{ backgroundColor: colors.mainColor }}
        position="center"
        positionValue={200}
        fadeInDuration={750}
        fadeOutDuration={2000}
        opacity={0.8}
        textStyle={{ color: 'white' }}
      />
      </MenuProvider >
    );
  }
}
const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height: Platform.OS === 'ios' ? 70 : 75,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
  },
  barAreaView: {
    marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
    marginRight: 20,
    marginLeft: 20,
   // marginTop: Platform.OS === 'ios' ? -5 : 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

  subView: {
    marginTop: 20,
    width: width - 40,
  },
  labelText: {
    color: colors.labelColor,
    fontSize: 12,
  },
  lineView: {
    height: 1,
    width: width - 40,
    backgroundColor: colors.lineColor,
    marginTop: 20,
  },
  pointsTextView: {
    fontSize: 25,
    fontWeight: '800',
  },
});
