import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  TextInput,
  RefreshControl,
  BackHandler,
  TouchableHighlight
} from 'react-native';
var _ = require('lodash');
import { width, height } from '../../services/screen';
import FastImage from 'react-native-fast-image'
import Toast, { DURATION } from 'react-native-easy-toast';
//import Modal, { ModalContent } from 'react-native-modals';
import Modal from 'react-native-modal';
import { inject, observer } from 'mobx-react';
import { colors } from '../../assets/styles/colors-theme';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CustomSmallButton from '../../components/customSmallButton';
import CustomLoginButon from '../../components/customLoginButton';
import Rank from '../../components/rank';
import TitleBar from '../../components/titleBar';
import { observable } from 'mobx';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { s, vs, ms } from 'react-native-size-matters';
import FeatherIcon from 'react-native-vector-icons/dist/Feather';
import { ScrollView } from 'react-native-gesture-handler';
@inject('appStore')
@observer
export default class ShoppingCart extends React.Component {
  @observable
  item1Exist = false;
  @observable
  allSelected = false;
  @observable
  deleteAble = false;
  @observable
  shippingPrice = 50;
  @observable
  modifyQuantityVisable = false;
  @observable
  addItemsVisable = false;
  @observable
  productIndex = null;
  @observable
  productQuantity = 0;
  @observable
  qtytemp = '';
  @observable
  edit = false;

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

  priceHandler(price) {
    var priceInt = parseFloat(price).toFixed(2);
    return 'HKD ' + priceInt.toString();
  }

  totalPriceHandler() {
    var totalPrice = 0;
    this.store.shoppingCartList.map((items, index) => {
      totalPrice = totalPrice + items.price * items.buyCount;
    });
    console.log(totalPrice);
    return totalPrice;
  }
  async componentDidMount() {
    this._unsubscribe = this.props.navigation.addListener('focus', async () => {
      await this.init()
    });

  }
  async componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  }
  handleBackButtonClick() {
    this.props.navigation.navigate('Main');
    return true
  }

  async init() {
    await this.checkAllSelected();
    await this.store.getDiscount();
    await this.store.getShoppingCart();
    await this.store.discountHandler(this)
    this.checkItems1Exist()
  }
  renderCheckBox() {
    if (!this.allSelected) {
      return (
        <Icon
          name="radiobox-blank"
          color={colors.mainColor}
          style={{ marginTop: 2 }}
          size={18}
        />
      );
    } else {
      return (
        <Icon
          name="radiobox-marked"
          color={colors.mainColor}
          style={{ marginTop: 2 }}
          size={18}
        />
      );
    }
  }

  checkItems1Exist() {
    this.item1Exist = false
    if (this.store.discount.length > 0) {
      if (this.store.discount[0].type == 2) {
        this.store.discount[0].items1.map((items, index) => {
          var itemsindex = this.store.shoppingCartList.findIndex(element => items.id == element.id)
          if (itemsindex >= 0) {
            this.item1Exist = true
          }
        })
      }
    }
  }

  renderAddButton() {
    if (this.store.discount.length > 0) {
      if (this.store.discount[0].type == 2) {
        if (this.item1Exist) {
          return (
            <TouchableOpacity style={{ height: 50, alignItems: 'center', justifyContent: 'center', }}
              onPress={() => { this.addItemsVisable = true }}>
              <View style={{ flex: 0.7, justifyContent: 'center', }}>
                <Text style={{ marginLeft: 40, marginRight: 40, fontSize: 17, fontWeight: '800', color: colors.mainColor }}>
                  {this.store.text.add + " HKD " + this.store.discount[0].value + " " + this.store.text.redeem + "....."}
                </Text>
              </View>

            </TouchableOpacity>
          )

        }
      }
    }
  }
  allSelectClickAction() {
    if (this.allSelected) {
      this.store.shoppingCartList.map((items, index) => {
        this.store.shoppingCartList[index].selected = false;
      });
      this.allSelected = false;
      this.deleteAble = false;
    } else {
      this.store.shoppingCartList.map((items, index) => {
        this.store.shoppingCartList[index].selected = true;
      });
      this.allSelected = true;
      this.deleteAble = true;
    }
  }
  async addFavouriteAction(items) {
    if (
      (await this.store.favorite.findIndex(
        element => element.id == items.id,
      )) != -1
    ) {
      this.refs.toast.show('商品已存在我的清單');
    } else {
      console.log('addFavourite');
      this.store.addFavouritePost(_.cloneDeep(items), this);
    }
  }

  modifyQuantityAction() {
    if (parseInt(this.productQuantity) > 0) {

      //action
      if (parseInt(this.productQuantity) != this.store.shoppingCartList[this.productIndex].buyCount)
        this.store.modifyShoppingCart(
          this.productIndex,
          this,
          this.productQuantity,
        )
    } else {
      this.refs.toast.show(this.store.text.quantityCannotBeZero);
    }
    this.modifyQuantityVisable = false;
  }

  addOrSubQtyAction(subOrAdd) {
    var qty = _.cloneDeep(parseInt(this.productQuantity))
    if (subOrAdd) {
      qty += 1
    } else {
      qty -= 1
    }
    if (parseInt(qty) > 0) {
      console.log(qty)
      console.log(this.productIndex)
      //action
      this.store.modifyShoppingCart(
        this.productIndex,
        this,
        qty,
      )
    } else {
      this.refs.toast.show(this.store.text.quantityCannotBeZero);
    }
  }

  async checkAllSelected() {
    var allSelected = true;
    this.deleteAble = false;
    await this.store.shoppingCartList.map((items, index) => {
      if (!items.selected) {
        allSelected = false;
      } else {
        this.deleteAble = true;
      }
    });
    this.allSelected = allSelected;
  }

  clickItemCheckBoxAction(index) {
    this.store.shoppingCartList.[index].selected = !this.store.shoppingCartList[index].selected;
    this.checkAllSelected();
  }

  deleteIconColorReturn() {
    if (this.deleteAble) {
      return colors.mainColor;
    } else {
      return colors.lineColor;
    }
  }

  async deleteAction() {
    console.log('test')
    var deleteIndex = [];
    var idsIndex = [];
    await this.store.shoppingCartList.map((items, index) => {
      if (items.selected) {
        deleteIndex.push(index);
        idsIndex.push(this.store.shoppingCartIds.findIndex(element => element.itemId == items.id));
      }
    });

    await this.store.deleteShoppingCartItem(deleteIndex, idsIndex, this);
  }

  renderItemSelectBox(select, index) {
    if (select) {
      return (
        <TouchableOpacity
          onPress={() => {
            this.clickItemCheckBoxAction(index);
          }}>
          <Icon
            name="radiobox-marked"
            color={colors.mainColor}
            style={{ marginTop: 2 }}
            size={18}
          />
        </TouchableOpacity>
      );
    } else {
      return (
        <TouchableOpacity
          onPress={() => {
            this.clickItemCheckBoxAction(index);
          }}>
          <Icon
            name="radiobox-blank"
            style={{ marginTop: 2 }}
            size={18}
          />
        </TouchableOpacity>
      );
    }
  }

  renderOriPrice(items) {
    if (items.hasOwnProperty('oriPrice')) {
      if (items.oriPrice > items.price) {
        return (
          <Text
            numberOfLines={1}
            style={{
              textDecorationLine: 'line-through',
              fontSize: s(12),
              fontWeight: 'bold',
            }}>
            {this.priceHandler(items.oriPrice)}
          </Text>
        )
      }
    } else {

    }
  }


  async goToOrder() {
    var data = []
    data = await this.store.shoppingCartList.filter(e => e.inventory == 0)
    if (data.length > 0) {
      this.refs.toast.show(data[0].name + this.store.text.outOfStock)
    } else {
      this.store.orderList = [];
      await this.store.shoppingCartList.map(async (items, index) => {
        await this.store.orderList.push(_.cloneDeep(items));
      });

      if (this.store.orderList.length > 0) {
        this.props.navigation.navigate('Order', { order: true });
      }
    }
  }

  renderShoppingCartItems() {
    return this.store.shoppingCartList.map((items, index) => {
      return (
        <TouchableOpacity
          style={{ alignItems: 'center' }}
          onPress={() =>
            this.props.navigation.navigate('ProductsDetails', { data: items })
          }>
          <View
            style={{
              flexDirection: 'row',
              marginLeft: 20,
              marginTop: 20,
              marginBottom: 20,
            }}>
            {this.edit ? (
              <View style={{ flex: 0.05, marginTop: 5 }}>
                {this.renderItemSelectBox(items.selected, index)}
              </View>
            ) : (
                <View style={{ flex: 0.05, marginTop: 5 }} />
              )}

            <View
              style={{
                flexDirection: 'row',
                flex: 0.95,
                marginTop: 10,
                marginLeft: 5,
              }}>
              <View style={{ flex: 0.6, flexDirection: 'row', }}>


                {items.hasOwnProperty('images') ? (
                  <FastImage
                    style={{
                      height: s(70),
                      width: s(70),
                    }}
                    source={{
                      uri: items.images[0].imageURL,
                    }}
                  />
                ) : (
                    <View
                      style={{
                        height: s(70),
                        width: s(70),

                        backgroundColor: colors.borderLineColor,
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}>
                      <Icon
                        name="image-remove"
                        size={s(40)}
                        color={colors.mainColor}
                      />
                      <Text style={{ color: colors.mainColor }}>No Image Yet</Text>
                    </View>
                  )}
                <View
                  style={{
                    marginLeft: 20,
                    marginRight: 10,
                  }}>
                  <View style={{ height: s(70), justifyContent: 'space-around' }}>
                    <Text
                      numberOfLines={1}
                      style={{
                        fontSize: s(12),
                        width: s(180),

                        fontWeight: '800',
                      }}>
                      {items.name}
                    </Text>
                    {/* <Rank ranking={parseFloat(3)} /> */}
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                      }}>
                      <Icon
                        name="star"

                        size={s(15)}
                        color={colors.mainColor}
                      />
                      <Text
                        style={{
                          marginLeft: s(2),
                          color: colors.mainColor,
                          fontSize: s(10),
                        }}>
                        {'4 (300)'}
                      </Text>
                    </View>
                    {this.renderOriPrice(items)}
                    <Text
                      numberOfLines={1}
                      style={{
                        fontSize: s(17),
                        color: items.hasOwnProperty('oriPrice') && items.oriPrice > items.price ? 'red' : 'black',
                        fontWeight: 'bold',
                      }}>
                      {this.priceHandler(items.price)}
                    </Text>
                    {/* <TouchableOpacity
                    style={{
                      flexDirection: 'row',
                      marginTop: 10,
                      marginBottom: 10,
                      alignItems: 'center',
                    }}
                    onPress={() => {
                      this.modifyQuantityVisable = true;
                      this.productIndex = index;
                      this.productQuantity = _.cloneDeep(items.buyCount);
                      //this.productCountInput.focus();
                    }}>
                    <Text style={{fontSize: 10, color: colors.mainColor}}>
                      {this.store.text.quantity + ':' + items.buyCount + ' '}
                    </Text>
                    <Text style={{fontSize: 10, color: colors.lineColor}}>
                      {'| '}
                    </Text>
                    <Text style={{fontSize: 10, color: colors.textColor}}>
                      {this.priceHandler(items.price * items.buyCount)}
                    </Text>

                    <Text style={{fontSize: 10, color: colors.mainColor}}>
                      {'  ' + this.store.text.changeQuantity}
                    </Text>
                  </TouchableOpacity> */}
                    {/* <View
                    style={{height: 1, backgroundColor: colors.lineColor}}
                  /> */}

                  </View>

                  {/* <View
                  style={{
                    marginTop: 5,
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}>
                  <TouchableOpacity
                    onPress={() => {
                      this.modifyQuantityVisable = true;
                      this.productIndex = index;
                      this.productQuantity = _.cloneDeep(items.buyCount);
                      //this.productCountInput.focus();
                    }}>
                    <Text style={{fontSize: 10, color: colors.mainColor}}>
                      {this.store.text.changeQuantity}
                    </Text>
                  </TouchableOpacity>
                  <Text style={{fontSize: 10, color: colors.lineColor}}>
                    {' | '}
                  </Text>
                  <TouchableOpacity
                    onPress={() => this.addFavouriteAction(items)}>
                    <Text style={{fontSize: 10, color: colors.mainColor}}>
                      {this.store.text.addToFavourite}
                    </Text>
                  </TouchableOpacity>
                  <Text style={{fontSize: 10, color: colors.lineColor}}>
                    {' | '}
                  </Text>
                  <TouchableOpacity
                    onPress={() => {
                      this.store.deleteShoppingCartItem(index, this);
                    }}>
                    <Icon name="delete" size={14} color={'gray'} />
                  </TouchableOpacity>
                </View> */}
                </View>
              </View>
              <View style={{
                flex: 0.4,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                shadowColor: "#000",
                shadowOffset: {
                  width: 0,
                  height: 1,
                },
                shadowOpacity: 0.22,
                shadowRadius: 2.22,

                elevation: 3,
              }}>
                {items.redeem ? (<View>
                  <Text>

                  </Text>
                </View>) : (<View style={{ flexDirection: 'row' }}>
                  <TouchableOpacity
                    onPress={() => {
                      this.productIndex = index
                      this.productQuantity = _.cloneDeep(items.buyCount);
                      this.addOrSubQtyAction(false)
                    }}
                    style={{
                      height: s(40),
                      width: s(25),
                      borderWidth: 1,
                      borderColor: colors.lineColor,
                      borderTopLeftRadius: s(10),
                      borderBottomLeftRadius: s(10),
                      backgroundColor: 'white',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                    <Text style={{ color: colors.mainColor, fontWeight: '400', fontSize: s(20) }}>-</Text>
                    {/* <Icon name = 'remove' color = 'white'/> */}
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={{
                      width: s(45),
                      height: s(40),
                      backgroundColor: 'white',
                      borderColor: colors.lineColor,
                      borderTopWidth: 1,
                      borderBottomWidth: 1,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                    onPress={() => {
                      this.modifyQuantityVisable = true;
                      this.productIndex = index;
                      this.productQuantity = _.cloneDeep(items.buyCount);
                    }}>
                    <Text style={{ fontSize: s(15), fontWeight: '500' }}>{items.buyCount}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      this.productIndex = index
                      this.productQuantity = _.cloneDeep(items.buyCount);
                      this.addOrSubQtyAction(true)
                    }}
                    style={{
                      height: s(40),
                      width: s(25),
                      borderWidth: 1,
                      backgroundColor: 'white',
                      borderColor: colors.lineColor,
                      borderTopRightRadius: s(10),
                      borderBottomRightRadius: s(10),
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                    <Text style={{ color: colors.mainColor, fontWeight: '400', fontSize: s(20) }}>+</Text>
                    {/* <Icon name = 'remove' color = 'white'/> */}
                  </TouchableOpacity>
                </View>)}

              </View>
            </View>

          </View>

        </TouchableOpacity>
      );
    });
  }
  renderShippingMessage() {
    if (this.store.shoppingCartList.length > 0) {
      if (this.store.shippingMethods.content[this.store.shippingMethods.content.findIndex(e => e.id == (this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? 4 : 2))].freeShippingMinAmount > this.totalPriceHandler()) {
        return (
          <View style={{ backgroundColor: '#DAEED5', borderTopColor: colors.line2Color, borderTopWidth: 1 }}>
            <Text style={{ color: colors.mainColor, marginHorizontal: 20, fontWeight: '500', marginTop: 10, marginBottom: 10 }}>
              {this.store.text.shippingMessage1 +
                this.store.priceHandler(this.store.shippingMethods.content[this.store.shippingMethods.content.findIndex(e => e.id == (this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? 4 : 2))].freeShippingMinAmount) +
                this.store.text.shippingMessage2 +
                this.store.priceHandler(this.store.shippingMethods.content[this.store.shippingMethods.content.findIndex(e => e.id == (this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? 4 : 2))].fee) +
                this.store.text.shippingMessage3
              }
            </Text>
            {this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? (<Text style={{ color: colors.mainColor, marginBottom: 10, marginHorizontal: 20, fontWeight: '500', }}>
              {this.store.text.groupShippingMessage1 +
                this.store.priceHandler(this.store.shippingMethods.content[this.store.shippingMethods.content.findIndex(e => e.id == (this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? 4 : 2))].freeShippingMinAmount) +
                this.store.text.groupShippingMessage2
              }
            </Text>) : (<View />)}
            <View style={styles.lineView} />
          </View>
        )
      }
    }
  }


  renderAddOptions() {
    if (this.store.discount.length > 0 && this.item1Exist) {
      return (
        <Modal isVisible={this.addItemsVisable}
          deviceWidth={width}
          deviceHeight={height}>
          <View style={{ height: height * 0.8, backgroundColor: 'white', borderRadius: 20 }}>
            {/* <Text style = {{margin:20}}>
              {this.store.text.shoppingGroup}
            </Text> */}
            <View style={{ height: 50, alignItems: 'center', justifyContent: 'center', }}>
              <Text style={{ fontSize: 17, fontWeight: '800', color: colors.mainColor }}>
                {this.store.text.add + " HKD " + this.store.discount[0].value + " " + this.store.text.redeem}
              </Text>
              <TouchableOpacity style={{ marginRight: 20, position: 'absolute', right: 10 }} onPress={() => this.addItemsVisable = false}>
                <Icon name='close' color={colors.mainColor} size={30} />
              </TouchableOpacity>

            </View>
            <ScrollView style={{ margin: 20 }}>

              {this.store.discount[0].items2.map((items, index) => {
                return (
                  <View
                    style={{
                      flexDirection: 'row',
                      marginLeft: 20,
                      marginTop: 20,
                      marginBottom: 20,
                    }}>


                    <View
                      style={{
                        flexDirection: 'row',
                        flex: 0.95,
                        marginTop: 10,
                        marginLeft: 5,
                      }}>
                      <View style={{ flex: 1, flexDirection: 'row', }}>

                        <TouchableOpacity onPress={() => { this.props.navigation.navigate('ProductsDetails', { data: items }); this.addItemsVisable = false }}>
                          {items.hasOwnProperty('images') ? (
                            <FastImage
                              style={{
                                height: 70,
                                width: 70,
                              }}
                              source={{
                                uri: items.images[0].imageURL,
                              }}
                            />
                          ) : (
                              <View
                                style={{
                                  height: 70,
                                  width: 70,

                                  backgroundColor: colors.borderLineColor,
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                }}>
                                <Icon
                                  name="image-remove"
                                  size={40}
                                  color={colors.mainColor}
                                />
                                <Text style={{ color: colors.mainColor }}>No Image Yet</Text>
                              </View>
                            )}
                        </TouchableOpacity>
                        <View
                          style={{
                            marginLeft: 20,
                            marginRight: 10,
                          }}>
                          <View style={{ height: 70, justifyContent: 'space-around' }}>
                            <Text
                              numberOfLines={1}
                              style={{
                                fontSize: 12,
                                width: 180,

                                fontWeight: '800',
                              }}>
                              {items.name}
                            </Text>

                            <TouchableHighlight style={{ width: 150, height: 40, backgroundColor: colors.mainColor, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}
                              onPress={() => this.store.addRedeemItemAction(items, this)}>
                              <Text style={{ color: 'white', fontSize: 17, fontWeight: '800' }}>
                                {this.store.text.redeem}
                              </Text>
                            </TouchableHighlight>





                          </View>

                        </View>
                      </View>
                      {/* <View style={{
                        flex: 0.4,
                        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' }}>

                        </View>
                      </View> */}
                    </View>

                  </View>
                )
              })}


            </ScrollView>

          </View>
        </Modal>
      )
    }
  }

  render() {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: colors.bgc,
        }}>
        <TitleBar self={this} showSearch={false} showBack={true} title={this.store.text.shoppingcart} />
        {this.renderShippingMessage()}
        <View
          style={{
            backgroundColor: 'white',
            width: width,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
          <View
            style={[
              styles.topBarButton,
              { flex: 0.3, borderRightWidth: this.edit ? 1 : 0 },
            ]}>
            <Text
              style={{

                fontWeight: '800',
                fontSize: 12,
              }}>
              {this.store.text.shoppingCartHave +
                ' ' +
                this.store.shoppingCartList.length +
                ' ' +
                this.store.text.products}
            </Text>
          </View>
          {this.edit ? (
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'row',
                flex: 0.4,
              }}>
              <TouchableOpacity
                style={[styles.topBarButton, { flex: 0.5 }]}
                onPress={() => this.allSelectClickAction()}>
                {this.renderCheckBox()}
                <Text style={[styles.topBarText, { marginLeft: 5 }]}>
                  {this.store.text.selectAll}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                disabled={!this.deleteAble}
                style={[styles.topBarButton, { flex: 0.5, borderLeftWidth: 1 }]}
                onPress={() => {
                  this.deleteAction();
                }}>
                <Icon
                  name="delete"
                  style={{}}
                  size={18}
                  color={this.deleteIconColorReturn()}
                />
                <Text
                  style={{
                    color: this.deleteAble ? 'black' : colors.lineColor,
                    fontSize: 9,
                  }}>
                  {this.store.text.remove}
                </Text>
              </TouchableOpacity>
            </View>
          ) : (
              <View style={{ flex: 0.4 }} />
            )}

          <TouchableOpacity
            onPress={() => {
              this.edit = !this.edit;
            }}
            style={[
              styles.topBarButton,
              { flex: 0.3, borderLeftWidth: this.edit ? 1 : 0 },
            ]}>
            <Icon
              color={colors.mainColor}
              name={this.edit ? 'close' : 'lead-pencil'}
              style={{ marginRight: 2, marginTop: 1 }}
              size={17}
            />
            <Text style={[styles.topBarText]}>
              {this.edit
                ? this.store.text.cancel + this.store.text.edit
                : this.store.text.edit}
            </Text>
          </TouchableOpacity>
        </View>

        {this.store.shoppingCartList.length > 0 ? (
          <View style={{ flex: 1 }}>


            <ScrollView
              refreshControl={
                <RefreshControl
                  refreshing={this.store.loading}
                  onRefresh={() => this.store.getShoppingCart()}
                />
              }>
              {this.renderAddButton()}
              {this.renderShoppingCartItems()}
              <View
                style={{
                  width: width - 60,
                  margin: 20,
                  marginRight: 30,
                  alignItems: 'flex-end',
                }}>

              </View>

            </ScrollView>
            <View style={{
              width: width, height: 200, borderWidth: 1, borderColor: colors.lineColor, borderTopRightRadius: 40, borderTopLeftRadius: 40,
              backgroundColor: 'white',
              shadowColor: "#000",
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.25,
              shadowRadius: 3.84,

              elevation: 5,
            }}>
              <View style={{ marginTop: 30, width: width, flexDirection: 'row' }}>
                <View style={{ flex: 1, }}>
                  <Text style={{ marginLeft: 20 }}>
                    {this.store.text.subTotal}
                  </Text>
                </View>
                <View style={{ flex: 1, alignItems: 'flex-end' }}>
                  <Text style={{ marginRight: 20 }}>
                    {this.priceHandler(this.totalPriceHandler())}
                  </Text>
                </View>
              </View>
              <View style={{ marginTop: 20, width: width, flexDirection: 'row' }}>
                <View style={{ flex: 1, }}>
                  <Text style={{ marginLeft: 20, fontWeight: '800', fontSize: 20 }}>
                    {this.store.text.total}
                  </Text>
                </View>
                <View style={{ flex: 1, alignItems: 'flex-end' }}>
                  <Text style={{ marginRight: 20, fontWeight: '800', fontSize: 20 }}>
                    {this.priceHandler(this.totalPriceHandler())}
                  </Text>
                </View>
              </View>
              <View style={{ width: width, justifyContent: 'center', alignItems: 'center', marginTop: 20 }}>
                <CustomLoginButon title={this.store.text.pay} onPress={() => { this.goToOrder(); }} />
              </View>

            </View>
          </View>
        ) : (
            <View
              style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <Text>{this.store.text.shoppingcartEmpty}</Text>
            </View>
          )}

        <Modal isVisible={this.modifyQuantityVisable}
          style={{ alignItems: 'center', justifyContent: 'center', }}
          deviceWidth={width}
          deviceHeight={height}>
          <View
            style={{
              borderRadius: 5,
              backgroundColor: 'white',
              width: width / 2,
              height: height * 0.15,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <View
              style={{
                width: 80,
                height: 30,
                backgroundColor: colors.inputBgc,
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 10,
              }}>
              {this.productIndex != null ? (
                <TextInput
                  style={{ fontSize: 15, color: colors.mainColor, paddingVertical: 0 }}
                  autoFocus={true}
                  value={this.productQuantity}
                  keyboardType={'numeric'}
                  ref={input => {
                    this.productCountInput = input;
                  }}
                  onChangeText={text => (this.productQuantity = text)}
                />
              ) : (
                  <View />
                )}
            </View>
            <TouchableOpacity
              style={{
                marginTop: 20,
                width: 80,
                height: 30,
                backgroundColor: colors.mainColor,
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 10,
              }}
              onPress={() => this.modifyQuantityAction()}>
              <Text style={{ color: 'white' }}>{this.store.text.sure}</Text>
            </TouchableOpacity>
          </View>

        </Modal>

        {/* <Modal
          visible={this.modifyQuantityVisable}
          width={0.5}
          height={0.15}
          onTouchOutside={() => {
            this.modifyQuantityVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.modifyQuantityVisable = false;
          }}>
          <ModalContent>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <View
                style={{
                  width: 80,
                  height: 30,
                  backgroundColor: colors.inputBgc,
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 10,
                }}>
                {this.productIndex != null ? (
                  <TextInput
                    style={{ fontSize: 15, color: colors.mainColor, paddingVertical: 0 }}
                    autoFocus={true}
                    value={'' + this.productQuantity}
                    keyboardType={'numeric'}
                    ref={input => {
                      this.productCountInput = input;
                    }}
                    onChangeText={text => (this.productQuantity = text)}
                  />
                ) : (
                    <View />
                  )}
              </View>
              <TouchableOpacity
                style={{
                  marginTop: 20,
                  width: 80,
                  height: 30,
                  backgroundColor: colors.mainColor,
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 10,
                }}
                onPress={() => this.modifyQuantityAction()}>
                <Text style={{ color: 'white' }}>{this.store.text.sure}</Text>
              </TouchableOpacity>
            </View>
          </ModalContent>
        </Modal> */}

        {this.renderAddOptions()}

        <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.create({
  topBarButton: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 25,
    borderColor: colors.mainColor,
    flexDirection: 'row',
  },
  topBarText: {
    fontSize: 10,
    color: colors.mainColor,
  },
});
