import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  Keyboard,
  TouchableWithoutFeedback,
  StyleSheet,
  TextInput,
  Alert,
} from 'react-native';
var _ = require('lodash');
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import { images } from '../../assets/images/imageIndex';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CheckAnimate from '../../components/checkAnimate';
import { width, height } from '../../services/screen';
import Loading from '../../components/Loading';
import { colors } from '../../assets/styles/colors-theme';
import Toast, { DURATION } from 'react-native-easy-toast';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import IonIcon from 'react-native-vector-icons/dist/Ionicons';
import CustomTextInput from '../../components/customTextInput';
import CustomLoginButton from '../../components/customLoginButton';


Icon.loadFont();

const Order = inject("appStore")(observer(class Order extends React.Component {

  paymentseletion = [
    { label: 'Visa', value: 0 },
    { label: this.store.text.fps, value: 2 },
    { label: 'PayMe', value: 3 }
    // {label: 'Alipay', value: 1},
  ];


  shippingSelection = [
    { label: '門市自取', value: 0, price: 0, freeShippingPrice: 0 },
    {
      label: '送到上門（滿' + '200' + '免運費)',
      value: 1,
      price: 20,
      freeShippingPrice: 1000,
    },
  ];


  paymentSelected = 0;


  payDisable = false;


  shippingSelected = 0;


  coupon1 = '';

  coupon2 = '';

  coupon2Correct = false;

  coupon2Index = null;

  shippingPrice = 50;

  totalProductsPrice = 0;

  discountProducts = [];

  normalProducts = [];

  discountTotalPrice = 0;

  discountProductsEnable = false;

  totalPrice = 0;


  freeShip = false;

  constructor(props) {
    super(props);
    this.store = props.appStore;
    makeObservable(this, {
      paymentseletion: observable,
      shippingSelection: observable,
      paymentSelected: observable,
      payDisable: observable,
      shippingSelected: observable,
      coupon1: observable,
      coupon2: observable,
      coupon2Correct: observable,
      coupon2Index: observable,
      shippingPrice: observable,
      totalProductsPrice: observable,
      discountProducts: observable,
      normalProducts: observable,
      discountTotalPrice: observable,
      discountProductsEnable: observable,
      totalPrice: observable,
      freeShip: observable,
    })
  }

  async componentWillMount() {
    await this.store.getPoints();
    await this.cloneOrderList();
    await this.store.getCoupons(this);
    await this.store.getShipppingMethods(this);
    if (this.store.creditCardinfo != null) {
      this.paymentseletion[0].label =
        this.store.text.creditCard +
        '   ' +
        '**** **** **** ' +
        this.store.creditCardinfo.last4;
    }
    this.countTotalPrice();
  }

  componentDidMount() {
    this.shippingPriceReturn();
  }

  shippingPriceReturn(which) {
    if (this.store.shippingMethods.length > 0) {
      var shipToHome = this.store.shippingMethods.findIndex(
        element => element.type == 1,
      );

      var takeGoodsInShop = this.store.shippingMethods.findIndex(
        element => element.type == 0,
      );

      if (takeGoodsInShop != -1) {
        this.shippingSelection = [
          {
            label: '門市自取',
            value: 0,
            price: 0,
            id: this.store.shippingMethods[takeGoodsInShop].id,
            freeShippingPrice: parseFloat(
              this.store.shippingMethods[shipToHome].free_shipping_min_amount,
            ),
          },
          {
            freeShippingPrice: parseFloat(
              this.store.shippingMethods[shipToHome].free_shipping_min_amount,
            ),
            id: this.store.shippingMethods[shipToHome].id,
            label:
              '送到上門（滿' +
              this.store.priceFormatReturn(
                parseFloat(
                  this.store.shippingMethods[shipToHome]
                    .free_shipping_min_amount,
                ),
              ) +
              '免運費)',
            value: 1,
            price: parseFloat(this.store.shippingMethods[shipToHome].fee),
          },
        ];
      }
    }
  }

  renderShippingSelection(items) {
    return (
      <TouchableOpacity
        style={{
          flexDirection: 'row',
          marginTop: 5,
          alignItems: 'center',
          marginRight: 10,
        }}
        onPress={() => {
          this.shippingSelected = items.value;
          this.countTotalPrice();
        }}>
        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 0.8 }}>
          {items.value === this.shippingSelected ? (
            <Icon name="circle-slice-8" color={colors.mainColor} size={12} />
          ) : (
            <Icon name="circle-outline" color={'black'} size={12} />
          )}
          <Text style={{ marginLeft: 5, fontSize: 12 }}>{items.label}</Text>
        </View>
        <View style={{ flex: 0.2 }}>
          <Text style={{ marginLeft: 5, fontSize: 12 }}>
            {this.store.priceFormatReturn(items.price)}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

  cloneOrderList() {
    this.normalProducts = [];
    this.store.orderList.map((items, index) => {
      this.normalProducts.push(_.cloneDeep(items));
    });
  }

  renderPaymentSelection(items) {
    return (
      <TouchableOpacity
        style={{ flexDirection: 'row', marginTop: 5, alignItems: 'center' }}
        onPress={() => (this.paymentSelected = items.value)}>
        {items.value === this.paymentSelected ? (
          <Icon name="circle-slice-8" color={colors.mainColor} size={12} />
        ) : (
          <Icon name="circle-outline" color={'black'} size={12} />
        )}
        <Text style={{ marginLeft: 5, fontSize: 12 }}>{items.label}</Text>
      </TouchableOpacity>
    );
  }

  async orderAction() {
    if (this.store.loginUserData.data.mobile != null) {
      if (this.store.addresses.length > 0) {
        if (this.store.creditCardinfo != null || this.paymentSelected != 0) {
          // var data = {
          //   line_items: [],
          //   coupon_lines: [],
          //   shipping: {
          //     first_name: this.store.loginUserData.data.shipping.first_name,
          //     last_name: this.store.loginUserData.data.shipping.last_name,
          //     address_1: this.store.loginUserData.data.shipping.address_1,
          //     address_2: this.store.loginUserData.data.shipping.address_2,
          //     city: '',
          //     state: '',
          //     postcode: '',
          //     country: 'HK',
          //   },
          // };
          var data = {
            line_items: [],
            coupon_lines: [],
            shipping: {
              shipping_method_id: 0,
              address_id: this.store.addresses[0].id,
            },
          };
          // if (this.shippingSelected == 0) {
          //   data.shipping_method = 4;
          // } else {
          //   if (this.freeShip) {
          //     data.shipping_method = 3;
          //   } else {
          //     data.shipping_method = 11;
          //   }
          // }
          if (this.coupon2Correct) {
            var couponCode = {
              code: this.store.coupons[this.coupon2Index].number,
            };
            data.coupon_lines.push(couponCode);
          }

          if (this.shippingSelected >= 0) {
            data.shipping.shipping_method_id = this.shippingSelection[
              this.shippingSelected
            ].id;
          } else {
          }
          await this.store.orderList.map(async (items, index) => {
            var orderData = {
              product_id: items.id,
              quantity: items.buyCount,
            };
            await data.line_items.push(orderData);
          });
          console.log(data);
          console.log(this.shippingSelection);
          console.log(this.coupon1);
          this.store.postOrder(data, this.coupon1, this.paymentSelected, this);
        } else {
          this.refs.toast.show('請先加入信用卡');
        }
      } else {
        this.refs.toast.show('請先加入地址');
      }
    } else {
      Alert.alert('', '請先加入電話號碼', [
        { text: '取消', onPress: () => console.log('Cancel') },
        {
          text: '加入',
          onPress: () => {
            this.props.navigation.navigate('SignUpVerify', {
              data: {
                first_name: '',
                last_name: '',
                welcome_code: '',
                country_code: '+852',
                mobile: '',
                email: '',
                ver_code: '',
                password: '',
              },
              addMobile: true,
            });
          },
        },
      ]);
    }
  }

  async coupon2OnChangeText(text) {
    this.coupon2 = text;
    console.log(this.coupon2);
    console.log(this.store.coupons);
    var index = this.store.coupons.findIndex(
      element => element.number === text,
    );
    console.log(index);
    if (index != -1) {
      console.log('index != -1');
      var coupon = this.store.coupons[index];

      if (
        coupon.maxUsesPerPerson > coupon.personUsed ||
        coupon.maxUsesPerPerson == 0
      ) {
        if (this.totalProductsPrice >= coupon.minAmountRequired) {

          if (coupon.allowMembers == '' || !coupon.hasOwnProperty('allowMembers')) {
            this.coupon2Correct = true;
            this.coupon2Index = index;
            console.log(index);
            console.log(this.totalProductsPrice);
          } else {
            if (coupon.allowMembers.search(this.store.loginUserData.data.id) != -1) {

              this.coupon2Correct = true;
              this.coupon2Index = index;
              console.log(index);
              console.log(this.totalProductsPrice);
            } else {
              this.coupon2 = '';
              this.refs.toast.show('不能使用')
            }
          }
        } else {
          console.log(this.totalProductsPrice);

          this.coupon2 = '';
          this.refs.toast.show(
            '此優惠券需要購買總數超過' +
            this.store.priceFormatReturn(
              parseFloat(coupon.minAmountRequired),
            ) +
            '的産品',
          );
        }
      } else {
        console.log(this.totalProductsPrice);
        console.log(coupon.minimum_amount);
        this.coupon2 = '';
        this.refs.toast.show('已超過優惠券使用次數');
      }
    } else {
      this.coupon2Correct = false;
      this.coupon2Index = null;
      this.discountProductsEnable = false;
      this.discountProducts = [];
      this.discountTotalPrice = 0;
      this.cloneOrderList();
    }
    this.countTotalPrice();
  }

  checkPrice(price) {
    if (price <= this.store.coupons[this.coupon2Index].minimum_amount) {
      this.coupon2 = '';
      this.refs.toast.show(
        '此優惠券需要購買總數超過' +
        this.store.priceFormatReturn(
          parseFloat(this.store.coupons[this.coupon2Index].minimum_amount),
        ) +
        '的優惠券支持的産品價格',
      );
      this.coupon2Correct = false;
      this.coupon2Index = null;
      this.discountProductsEnable = false;
      this.discountProducts = [];
      this.discountTotalPrice = 0;
      this.cloneOrderList();
    }
  }

  async discountProductsHandler(which, ids) {
    this.discountTotalPrice = 0;
    this.discountProducts = [];
    if (which) {
      await ids.forEach(element => {
        this.store.orderList.map((items, index) => {
          if (items.id == element) {
            this.normalProducts.splice(
              this.normalProducts.findIndex(
                normalItem => normalItem.id == element,
              ),
              1,
            );
            this.discountTotalPrice += parseFloat(items.price) * items.buyCount;
            this.discountProducts.push(_.cloneDeep(items));
          }
        });
      });
      console.log(this.discountProducts);
    } else {
      await ids.forEach(element => {
        this.store.orderList.map((items, index) => {
          items.categories.map((categoriesItems, index) => {
            if (categoriesItems.id == element) {
              this.normalProducts.splice(
                this.normalProducts.findIndex(
                  normalItem => normalItem.id == items.id,
                ),
                1,
              );
              this.discountTotalPrice +=
                parseFloat(items.price) * items.buyCount;
              this.discountProducts.push(_.cloneDeep(items));
            }
          });
        });
      });
      console.log(this.discountProducts);
      this.store.removeDuplicates(this.discountProducts, it => it.id);
    }
  }

  async exclude_sale_itemsHandler() {
    this.x = 0;
    this.discountProducts = [];
    await this.store.orderList.map(async (items, index) => {
      if (!items.on_sale) {
        await this.normalProducts.splice(
          this.normalProducts.findIndex(element => element.id == items.id),
          1,
        );
        await this.discountProducts.push(_.cloneDeep(items));
        this.discountTotalPrice += parseFloat(items.price) * items.buyCount;
      }
    });
    console.log(this.discountProducts);
  }

  renderCoupon2SubValue() {
    if (this.coupon2Index != null) {
      if (this.store.coupons[this.coupon2Index].discountRate > 0) {
        return (
          <Text style={{ color: colors.textColor }}>
            {'-' + this.store.coupons[this.coupon2Index].discountRate + '%'}
          </Text>
        );
      } else {
        return (
          <Text style={{ color: colors.textColor }}>
            {'-' +
              this.store.priceFormatReturn(
                parseFloat(
                  this.store.coupons[this.coupon2Index].discountAmount,
                ),
              )}
          </Text>
        );
      }
    }
  }

  // totalPrice() {
  //   var totalPrice = 0;
  //   this.normalProducts.map(async (items, index) => {
  //     console.log(items.price);
  //     totalPrice += parseFloat(items.price) * items.buyCount;
  //   });
  //   this.totalProductsPrice = totalPrice;
  //   // return this.store.priceFormatReturn(
  //   //   ((totalPrice - parseInt(this.coupon1)) * (100 - parseInt(this.coupon2))) /
  //   //     100 +
  //   //     this.shippingPrice,
  //   // );
  //   if (this.coupon2Index != null) {
  //     if (this.store.coupons[this.coupon2Index].discount_type == 'percent') {
  //       totalPrice =
  //         ((totalPrice - parseFloat(0)) *
  //           (100 - parseFloat(this.store.coupons[this.coupon2Index].amount))) /
  //         100;
  //     } else {
  //       totalPrice =
  //         totalPrice -
  //         parseFloat(0) -
  //         parseFloat(this.store.coupons[this.coupon2Index].amount);
  //     }
  //   }
  //   return this.store.priceFormatReturn(totalPrice);
  // }

  renderDiscountProduct() {
    console.log('here' + this.discountProducts);
    return this.discountProducts.map((items, index) => {
      return this.renderItems(items);
    });
  }

  renderItems(items) {
    return (
      <View style={{ flexDirection: 'row', marginTop: 20 }}>
        <View style={{ flex: 0.5 }}>
          <Text
            style={{
              color: colors.mainColor,
            }}>
            {items.name}
          </Text>
        </View>
        <View style={{ flex: 0.2 }}>
          <Text
            style={{
              color: colors.mainColor,
            }}>
            {'x' + items.buyCount}
          </Text>
        </View>
        <View style={{ flex: 0.3, alignItems: 'flex-end' }}>
          <Text style={{ color: colors.textColor }}>
            {this.store.priceFormatReturn(items.price * items.buyCount)}
          </Text>
        </View>
      </View>
    );
  }

  payAction() {
    var data = {
      coupon_lines: [],
      shipping: {
        first_name: '',
        last_name: '',
        company: '',
        address_1: '',
        address_2: '',
        city: '',
        state: '',
        postcode: '',
        country: 'hong kong',
      },
      line_items: [],
    };
  }

  onlyDigits(s) {
    for (let i = s.length - 1; i >= 0; i--) {
      const d = s.charCodeAt(i);
      if (d < 48 || d > 57) return false;
    }
    return true;
  }

  usePoints(text) {
    if (this.onlyDigits(text)) {
      var numbers = parseInt(text);
      if (numbers > this.store.points) {
        this.coupon1 = '';
        this.countTotalPrice();
      } else {

        // if (numbers > this.store.points / 2) {
        //   this.refs.toast.show('一次只能使用一半以下的積分')
        // } else {

        this.coupon1 = text;
        this.countTotalPrice();
        //  }
      }
    } else {
      console.log('must numbers');
      this.coupon1 = '';
      this.countTotalPrice();
    }
  }

  countTotalPrice() {
    console.log(this.shippingSelection[this.shippingSelected]);
    this.totalPrice = 0;
    totalProductsPrice = 0;
    this.normalProducts.map((items, index) => {
      this.totalPrice += parseFloat(items.price) * items.buyCount;
      //this.totalProductsPrice += parseFloat(items.price) * items.buyCount;
      this.totalProductsPrice = _.cloneDeep(this.totalPrice);
    });
    console.log(this.totalPrice);
    // this.totalPrice += this.discountProductsTotalPriceHandler(
    //   this.discountTotalPrice,
    // );
    console.log(this.totalPrice);

    if (this.discountProductsEnable == false && this.coupon2Correct == true) {
      if (this.store.coupons[this.coupon2Index].discountRate > 0) {
        console.log('testing2');
        this.totalPrice =
          this.totalPrice *
          ((100 -
            parseFloat(this.store.coupons[this.coupon2Index].discountRate)) /
            100);
      } else {
        console.log('testing');
        console.log(this.totalPrice);
        console.log(this.store.coupons[this.coupon2Index].discountAmount);
        this.totalPrice -= parseFloat(
          this.store.coupons[this.coupon2Index].discountAmount,
        );
        console.log(this.totalPrice);
      }
    }
    if (
      this.totalProductsPrice <
      parseFloat(
        this.shippingSelection[this.shippingSelected].freeShippingPrice,
      )
    ) {
      this.freeShip = false;
      this.totalPrice += this.shippingSelection[this.shippingSelected].price;
    } else {
      this.freeShip = true;
    }

    if (parseInt(this.coupon1) != 0 || this.coupon1 != '') {
      if (parseInt(this.coupon1) / this.store.pointsMemony <= this.totalPrice) {
        this.totalPrice -= parseInt(this.coupon1) / this.store.pointsMemony;
      }
    }
    console.log(this.totalPrice);
  }

  discountProductsTotalPriceHandler(price) {
    console.log(this.store.coupons[this.coupon2Index]);
    if (this.coupon2Index != null) {
      if (this.store.coupons[this.coupon2Index].discountRate > 0) {
        return (
          price *
          ((100 -
            parseFloat(this.store.coupons[this.coupon2Index].discountRate)) /
            100)
        );
      } else {
        return (
          price -
          parseFloat(this.store.coupons[this.coupon2Index].discountAmount)
        );
      }
    } else {
      return 0;
    }
  }
  renderShippingPrice() {
    if (!this.freeShip) {
      return this.store.priceFormatReturn(
        this.shippingSelection[this.shippingSelected].price,
      );
    } else {
      return this.store.priceFormatReturn(0);
    }
  }

  countCoupon1() {
    if (this.coupon1 == '0' || this.coupon1 == '') {
      return '-HK$0.0';
    } else {
      return (
        '-' +
        this.store.priceFormatReturn(
          parseFloat(this.coupon1) / this.store.pointsMemony,
        )
      );
    }
  }

  render() {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: colors.bgc,
        }}>
        <Loading loading={this.store.loading} />
        <CheckAnimate
          visible={this.store.animateStatus.show}
          progress={this.store.animateStatus.progress}
        />
        <View
          style={{
            width: width,
            height: Platform.OS === 'ios' ? 45 : 70,
            justifyContent: 'center',

            marginTop: Platform.OS === 'ios' ? 0 : 20,
            alignItems: 'center',
            backgroundColor: colors.mainColor,
          }}>
          <Text style={{ color: 'white', fontSize: 16 }}>
            {this.store.text.paymentDetails}
          </Text>

          <TouchableOpacity
            style={{
              height: 45,
              width: 45,
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              left: 10,
            }}
            onPress={() => {
              this.props.navigation.goBack();
            }}>
            <IonIcon name="ios-arrow-back" color="white" size={40} />
          </TouchableOpacity>
        </View>
        <View
          style={{
            width: width,
            height: 35,
            justifyContent: 'center',
            backgroundColor: colors.otherGreen,
          }}>
          <Text style={{ color: 'white', marginLeft: 20 }}>
            {this.store.text.products}
          </Text>
        </View>
        <KeyboardAwareScrollView>
          <View style={{ marginRight: 20, marginLeft: 20, flex: 1 }}>
            {this.normalProducts.map((items, index) => {
              return this.renderItems(items);
            })}
            <View style={styles.lineView} />
            <View style={{ flexDirection: 'row', marginTop: 10 }}>
              <View style={{ flex: 0.2 }}>
                <Text style={{ color: colors.textColor }}>
                  {this.store.text.shippingPrice}
                </Text>
              </View>
              <View style={{ flex: 0.5 }}>
                <Text style={{ color: colors.textColor }}>
                  {this.shippingSelection[this.shippingSelected].label}
                </Text>
              </View>
              <View style={{ flex: 0.3, alignItems: 'flex-end' }}>
                <Text style={{ color: colors.textColor }}>
                  {this.renderShippingPrice()}
                </Text>
              </View>
            </View>
            <View style={styles.lineView} />
            <View style={{ flexDirection: 'row', marginTop: 10 }}>
              <View style={{ flex: 1 }}>
                <Text style={{ color: colors.textColor }}>
                  {this.store.text.discount}
                </Text>
              </View>

              <View style={{ flex: 1, alignItems: 'flex-end' }}>
                <Text style={{ color: colors.textColor }}>
                  {this.countCoupon1()}
                </Text>
              </View>
            </View>
            {this.coupon2Correct ? (
              <View>
                <View style={{ flexDirection: 'row' }}>
                  <View style={{ flex: 1 }}>
                    <Text style={{ color: colors.textColor }}>
                      {this.store.text.coupon}
                    </Text>
                  </View>

                  <View style={{ flex: 1, alignItems: 'flex-end' }}>
                    {this.renderCoupon2SubValue()}
                  </View>
                </View>
                {this.discountProductsEnable ? (
                  <View style={{ marginTop: 20, flex: 1 }}>
                    <Text style={{ color: colors.textColor }}>
                      {this.store.text.productsThatCanUseCoupons}
                    </Text>
                    {this.renderDiscountProduct()}
                    <View style={{ alignItems: 'flex-end' }}>
                      <Text style={{ marginTop: 10, color: colors.textColor }}>
                        <Text style={{ color: colors.mainColor }}>
                          {this.store.text.totalNumberOfDiscountedProducts +
                            '： '}
                        </Text>
                        {this.store.priceFormatReturn(
                          this.discountProductsTotalPriceHandler(
                            this.discountTotalPrice,
                          ),
                        )}
                      </Text>
                    </View>
                  </View>
                ) : (
                  <View></View>
                )}
              </View>
            ) : (
              <View />
            )}

            <View style={styles.lineView} />
            <View style={{ flexDirection: 'row', marginTop: 20 }}>
              <View style={{ flex: 1 }}>
                <Text style={{ color: colors.mainColor }}>
                  {' ' + this.store.text.total + ': '}
                </Text>
              </View>
              <View style={{ flex: 1, alignItems: 'flex-end' }}>
                <Text style={{ color: colors.textColor }}>
                  {this.store.priceFormatReturn(this.totalPrice)}
                </Text>
              </View>
            </View>
            <View
              style={{
                marginTop: 20,
                width: width - 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  width: width - 60,
                  height: 40,
                  // borderWidth: 1,
                  borderColor: colors.mainColor,
                  justifyContent: 'center',
                  borderRadius: 50,
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{ width: 80, fontSize: 12, color: colors.textColor }}>
                  {'積分(' + this.store.points + ') : '}
                </Text>
                <View
                  style={{
                    width: 200,
                    height: 20,
                    borderRadius: 20,
                    backgroundColor: colors.signupInputBgc,
                    // borderColor: colors.line2Color,
                    // borderWidth: 1,
                  }}>
                  <TextInput
                    editable={this.store.points <= 0 ? false : true}
                    keyboardType={'number-pad'}
                    underlineColorAndroid="rgba(0,0,0,0)"
                    style={{ marginLeft: 10, color: colors.mainColor }}
                    value={this.coupon1.toString()}
                    onChangeText={text => {
                      this.usePoints(text);
                    }}
                  />
                </View>
              </View>
              <View
                style={{
                  marginTop: 10,
                  width: width - 60,
                  height: 40,
                  //  borderWidth: 1,
                  borderColor: colors.mainColor,
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{ width: 80, fontSize: 12, color: colors.textColor }}>
                  {this.store.text.coupon + ' ： '}
                </Text>
                <View
                  style={{
                    width: 200,
                    height: 20,
                    borderRadius: 20,
                    backgroundColor: colors.signupInputBgc,
                    borderColor: colors.line2Color,
                    //  borderWidth: 1,
                  }}>
                  <TextInput
                    underlineColorAndroid="rgba(0,0,0,0)"
                    style={{ marginLeft: 10, color: colors.mainColor }}
                    value={this.coupon2}
                    onChangeText={text => {
                      this.coupon2OnChangeText(text);
                    }}
                  />
                </View>
              </View>
            </View>
            <View style={{ marginTop: 10, marginLeft: 20, width: width - 40 }}>
              {this.shippingSelection.map((items, index) => {
                return this.renderShippingSelection(items);
              })}
              <View
                style={{
                  flexDirection: 'row',
                  marginTop: 5,
                  justifyContent: 'space-between',
                }}>
                <Text
                  style={{
                    marginLeft: 17,
                    fontSize: 12,
                    color: colors.grayTextColor,
                    flex: 0.75,
                  }}>
                  {this.store.addresses.length > 0
                    ? this.store.addresses[0].region.name +
                    ', ' +
                    this.store.addresses[0].district.name +
                    ', ' +
                    this.store.addresses[0].address
                    : ''}
                </Text>
                <View style={{ flex: 0.25 }}>
                  <TouchableOpacity
                    onPress={() =>
                      this.props.navigation.navigate('AddressSetting')
                    }
                    style={{
                      justifyContent: 'center',
                      alignItems: 'center',
                      backgroundColor: colors.mainColor,
                      width: 60,
                      height: 15,
                      marginLeft: 8,
                      borderRadius: 5,
                    }}>
                    <Text style={{ fontSize: 10, color: 'white' }}>
                      {this.store.addresses.length > 0
                        ? this.store.text.changeAddress
                        : this.store.text.addAddress}
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
            <View style={{ marginTop: 20, marginLeft: 20 }}>
              <Text
                style={{
                  color: colors.mainColor,
                  marginBottom: 10,
                }}>
                {this.store.text.paymentMethods}
              </Text>
              {this.paymentseletion.map((items, index) => {
                return this.renderPaymentSelection(items);
              })}
            </View>
            <View style={styles.lineView} />
            <View
              style={{
                width: width - 40,
                alignItems: 'center',
                marginBottom: 40,
              }}>
              <TouchableOpacity
                disabled={this.payDisable}
                onPress={() => {
                  this.orderAction();
                }}
                style={{
                  backgroundColor: colors.mainColor,
                  height: 28,
                  borderRadius: 5,
                  width: 250,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 20,
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontSize: 14,
                    fontWeight: 'bold',
                  }}>
                  {this.paymentSelected == 0
                    ? this.store.text.confirmPayment
                    : this.store.text.confirmOrder}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </KeyboardAwareScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: colors.mainColor }}
          position="center"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'white' }}
        />
      </SafeAreaView>
    );
  }
}))
const styles = StyleSheet.flatten({
  lineView: {
    height: 1,
    width: width - 40,
    backgroundColor: colors.line2Color,
    marginTop: 10,
  },
});

export default Order
