import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  Keyboard,
  TouchableWithoutFeedback,
  StyleSheet,
  TextInput,
} from 'react-native';
var _ = require('lodash');
import {inject, observer} from 'mobx-react';
import TitleBar from '../../components/titleBar';
import {observable} from 'mobx';
import moment from 'moment';
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();
@inject('appStore')
@observer
export default class HistoryDetails extends React.Component {
  @observable
  paymentseletion = [
    {label: 'Visa', value: 0},
    {label: this.store.text.cashOnDelivery, value: 1},

    // {label: 'Alipay', value: 1},
  ];

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

  @observable
  paymentSelected = 0;

  @observable
  shippingSelected = 0;
  @observable
  payDisable = false;
  @observable
  coupon1 = '';
  @observable
  coupon2 = '';
  @observable
  coupon2Correct = false;
  @observable
  coupon2Index = null;
  @observable
  shippingPrice = 50;
  @observable
  totalProductsPrice = 0;
  @observable
  discountProducts = [];
  @observable
  normalProducts = [];
  @observable
  discountTotalPrice = 0;
  @observable
  discountProductsEnable = false;
  @observable
  totalPrice = 0;
  @observable
  data = this.props.route.params.data;

  @observable
  freeShip = false;

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

  componentDidMount() {
    this.shippingPriceReturn();
  }

  statusHandler(text) {
    switch (text) {
      case 'pending':
        return '等待付款中';
        break;
      case 'processing':
        return '處理中';
        break;
      case 'on-hold':
        return '擱置中';
        break;
      case 'completed':
        return '已完成';
        break;
      case 'cancelled':
        return '已取消';
        break;
      case 'refunded':
        return '已退款';
        break;
      case 'shipped':
        return '已出貨 ';
        break;
    }
  }

  shippingMethodHandler(type) {
    switch (type) {
      case 0:
        return '門市自取';
        break;
      case 1:
        return '送到上門';
        break;
      case '3':
        return '送到上門';
        break;
    }
  }

  paymentMethodStringReturn(value) {
    switch (value) {
      case 'COD':
        return this.store.text.cashOnDelivery;
        break;
      case 'Credit Card':
        return this.store.text.creditCard;
        break;
      default:
        return value;
        break;
    }
  }

  shippingPriceReturn(which) {
    if (this.store.shippingMethods.length > 0) {
      var shippingPriceIndex = this.store.shippingMethods.findIndex(
        element => element.id == 11,
      );
      var totalPriceForFreeShippingIndex = this.store.shippingMethods.findIndex(
        element => element.id == 3,
      );
      console.log(shippingPriceIndex);

      if (shippingPriceIndex != -1 && totalPriceForFreeShippingIndex != -1) {
        this.shippingSelection = [
          {
            label: '門市自取',
            value: 0,
            price: 0,
            freeShippingPrice: parseFloat(
              this.store.shippingMethods[totalPriceForFreeShippingIndex]
                .settings.min_amount.value,
            ),
          },
          {
            freeShippingPrice: parseFloat(
              this.store.shippingMethods[totalPriceForFreeShippingIndex]
                .settings.min_amount.value,
            ),
            label:
              '送到上門（滿' +
              this.store.priceFormatReturn(
                parseFloat(
                  this.store.shippingMethods[totalPriceForFreeShippingIndex]
                    .settings.min_amount.value,
                ),
              ) +
              '免運費)',
            value: 1,
            price: parseFloat(
              this.store.shippingMethods[shippingPriceIndex].settings.cost
                .value,
            ),
          },
        ];
      }
    }
  }

  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, color: colors.mainColor}}>
          {items.label}
        </Text>
      </TouchableOpacity>
    );
  }

  async orderAction() {
    if (this.store.creditCardinfo != null || this.paymentSelected != 0) {
      if (this.paymentSelected == 0) {
        this.store.payByCreditCard(this.data.id, this.coupon1, this);
      } else {
        // this.store.payByWeChat(this.data.id, this.coupon1, this);
        this.store.payBycash(this.data.id, this.coupon1, this);
      }
    } else {
      this.refs.toast.show('請先加入信用卡');
    }
  }

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

      if (
        coupon.excluded_product_ids.length == 0 &&
        coupon.product_ids.length == 0 &&
        coupon.product_categories.length == 0 &&
        !coupon.exclude_sale_items
      ) {
        if (this.totalProductsPrice >= coupon.minimum_amount) {
          this.coupon2Correct = true;
          this.coupon2Index = index;
          console.log(index);
        } else {
          this.coupon2 = '';
          this.refs.toast.show(
            '此優惠券需要購買總數超過' +
              this.store.priceFormatReturn(parseFloat(coupon.minimum_amount)) +
              '的産品',
          );
        }
      } else {
        if (coupon.exclude_sale_items) {
          this.coupon2Correct = true;
          this.coupon2Index = index;
          this.discountProductsEnable = true;
          await this.exclude_sale_itemsHandler();
          console.log(index);
          this.checkPrice(this.discountTotalPrice);
          // do exclude sale item
        } else {
          if (coupon.product_ids.length > 0) {
            console.log('coupon.product_ids.length > 0');

            this.discountProductsEnable = true;
            this.coupon2Index = index;
            this.discountProductsHandler(true, coupon.product_ids);
            this.coupon2Correct = true;
            console.log(index);
            this.checkPrice(this.discountTotalPrice);
          } else if (coupon.product_categories.length > 0) {
            this.discountProductsEnable = true;
            this.coupon2Index = index;
            this.discountProductsHandler(false, coupon.product_categories);
            this.coupon2Correct = true;
            console.log(index);
            this.checkPrice(this.discountTotalPrice);
          }
        }
      }
    } else {
      this.coupon2Correct = false;
      this.coupon2Index = null;
      this.discountProductsEnable = false;
      this.discountProducts = [];
      this.discountTotalPrice = 0;
      this.cloneOrderList();
    }
    this.countTotalPrice();
  }

  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) {
    console.log(text);
    if (this.onlyDigits(text)) {
      var numbers = parseInt(text);
      if (numbers > this.store.points) {
        this.coupon1 = '';
      } else {
        this.coupon1 = text;
      }
    } else {
      console.log('must numbers');
      this.coupon1 = '';
    }
  }

  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].discount_type == 'percent') {
        return (
          <Text>
            {'-' + this.store.coupons[this.coupon2Index].amount + '%'}
          </Text>
        );
      } else {
        return (
          <Text>
            {'-' +
              this.store.priceFormatReturn(
                parseFloat(this.store.coupons[this.coupon2Index].amount),
              )}
          </Text>
        );
      }
    }
  }

  // totalPrice() {
  //   var totalPrice = 0;
  //   this.normalProducts.map(async (items, index) => {
  //     console.log(items.price);
  //     totalPrice += parseFloat(items.price) * items.buyCount;
  //   });
  //   this.totalProductsPrice = totalPrice;
  //   // returnthis.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);
  //     }
  //   }
  //   returnthis.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.quantity}
          </Text>
        </View>
        <View style={{flex: 0.3, alignItems: 'flex-end'}}>
          <Text
            style={{
              color: colors.mainColor,
            }}>
            {this.store.priceFormatReturn(parseFloat(items.subtotal))}
          </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: [],
    };
  }

  countTotalPrice() {
    console.log(this.shippingSelection[this.shippingSelected]);
    this.totalPrice = 0;
    this.normalProducts.map((items, index) => {
      this.totalPrice += parseFloat(items.price) * items.buyCount;
    });
    this.totalPrice += this.discountProductsTotalPriceHandler(
      this.discountTotalPrice,
    );
    if (this.discountProductsEnable == false && this.coupon2Correct == true) {
      if (this.store.coupons[this.coupon2Index].discount_type == 'percent') {
        this.totalPrice =
          this.totalPrice *
          ((100 - parseFloat(this.store.coupons[this.coupon2Index].amount)) /
            100);
      } else {
        this.totalPrice -= parseFloat(
          this.store.coupons[this.coupon2Index].amount,
        );
      }
    }
    if (
      this.totalPrice <
      parseFloat(
        this.shippingSelection[this.shippingSelected].freeShippingPrice,
      )
    ) {
      this.freeShip = false;
      this.totalPrice += this.shippingSelection[this.shippingSelected].price;
    } else {
      this.freeShip = true;
    }
  }

  orderTotal() {
    if (this.coupon1 != '' && this.coupon1 != '0') {
      return this.data.total - parseInt(this.coupon1) / this.store.pointsMemony;
    } else {
      return this.data.total;
    }
  }

  discountProductsTotalPriceHandler(price) {
    console.log(this.store.coupons[this.coupon2Index]);
    if (this.coupon2Index != null) {
      if (
        this.store.coupons[this.coupon2Index].discount_type != undefined ||
        this.store.coupons[this.coupon2Index].discount_type != null ||
        this.coupon2Index != null
      ) {
        if (this.store.coupons[this.coupon2Index].discount_type == 'percent') {
          return (
            price *
            ((100 - parseFloat(this.store.coupons[this.coupon2Index].amount)) /
              100)
          );
        } else {
          return (
            price - parseFloat(this.store.coupons[this.coupon2Index].amount)
          );
        }
      }
    } else {
      return 0;
    }
  }
  renderShippingPrice() {
    if (!this.freeShip) {
      returnthis.store.priceFormatReturn(
        this.shippingSelection[this.shippingSelected].price,
      );
    } else {
      returnthis.store.priceFormatReturn(0);
    }
  }

  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}
        />
        <TitleBar self={this} showSearch={true} />

        <View
          style={{
            width: width,
            height: Platform.OS === 'ios' ? 45 : 70,
            justifyContent: 'center',

            marginTop: Platform.OS === 'ios' ? 0 : 20,
            alignItems: 'center',
            backgroundColor: 'white',
          }}>
          <Text
            style={{color: colors.mainColor, fontSize: 14, fontWeight: 'bold'}}>
            {this.store.text.orderNumber + '：' + this.data.id}
          </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={colors.mainColor} size={40} />
          </TouchableOpacity>
        </View>
        <View
          style={{
            width: width - 50,
            height: 40,
            marginLeft: 25,
            borderTopWidth: 1,
            borderTopColor: colors.line2Color,
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 11,
              color: colors.mainColor,
              fontWeight: 'bold',
            }}>
            {this.store.text.date +
              ' ： ' +
              moment(this.data.date_created).format('DD/MM/YYYY')}
          </Text>
          <Text
            style={{
              fontSize: 11,
              color: colors.mainColor,
              //marginLeft: 25,
              fontWeight: 'bold',
            }}>
            {this.store.text.progressRate +
              ' ： ' +
              this.statusHandler(this.data.status)}
          </Text>
        </View>
        <View
          style={{
            width: width,
            height: 35,
            justifyContent: 'center',
            backgroundColor: colors.subTextColor,
          }}>
          <Text style={{color: 'white', marginLeft: 25}}>
            {this.store.text.products}
          </Text>
        </View>
        <KeyboardAwareScrollView>
          <View style={{marginRight: 20, marginLeft: 20, flex: 1}}>
            {this.data.line_items.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.mainColor}}>
                  {this.store.text.shippingPrice}
                </Text>
              </View>
              <View style={{flex: 0.5}}>
                <Text style={{color: colors.mainColor}}>
                  {this.shippingMethodHandler(
                    this.data.shipping.shipping_method_type,
                  )}
                </Text>
              </View>
              <View style={{flex: 0.3, alignItems: 'flex-end'}}>
                <Text style={{color: colors.mainColor}}>
                  {this.store.priceFormatReturn(
                    parseFloat(this.data.shipping.fee),
                  )}
                </Text>
              </View>
            </View>

            <View style={styles.lineView} />
            {/* {this.data.coupon_lines.length > 0 ? (
              <View>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    marginTop: 10,
                  }}>
                  <View style={{flex: 1}}>
                    <Text>{this.store.text.discount}</Text>
                  </View>

                  <View style={{flex: 1, alignItems: 'flex-end'}}>
                    <Text>
                      {'-' +
                        this.store.priceFormatReturn(
                          parseFloat(this.data.coupon_lines[0].discount),
                        )}
                    </Text>
                  </View>
                </View>
                <View style={styles.lineView} />
              </View>
            ) : (
              <View></View>
            )} */}
            {/* {this.data.fee_lines.length > 0 ? (
              <View>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    marginTop: 10,
                  }}>
                  <View style={{flex: 1}}>
                    <Text>{this.store.text.pointsDiscount}</Text>
                  </View>

                  <View style={{flex: 1, alignItems: 'flex-end'}}>
                    <Text>
                      {'-' +
                        this.store.priceFormatReturn(
                          parseFloat(this.data.fee_lines[0].amount),
                        )}
                    </Text>
                  </View>
                </View>
                <View style={styles.lineView} />
              </View>
            ) : (
              <View></View>
            )} */}
            <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.mainColor}}>
                  {this.store.text.orderTotal +
                    ': ' +
                    this.store.priceFormatReturn(this.orderTotal())}
                </Text>
              </View>
            </View>
            <View style={{marginTop: 50}}>
              <Text style={{color: colors.mainColor}}>
                {this.shippingMethodHandler(
                  this.data.shipping.shipping_method_type,
                )}
              </Text>
              {this.data.shipping.shipping_method_type == 1 ? (
                <Text
                  style={{color: colors.mainColor, fontSize: 13, marginTop: 5}}>
                  {this.data.shipping.region_name +
                    ', ' +
                    this.data.shipping.district_name +
                    ', ' +
                    this.data.shipping.address}
                </Text>
              ) : (
                <View />
              )}
            </View>
            {this.data.status == 'pending' ? (
              <View>
                <View style={{marginTop: 20}}>
                  <Text
                    style={{
                      color: colors.mainColor,
                      marginBottom: 10,
                    }}>
                    {this.store.text.paymentMethods}
                  </Text>
                  {this.paymentseletion.map((items, index) => {
                    return this.renderPaymentSelection(items);
                  })}
                  <View
                    style={{
                      height: 40,

                      marginTop: 20,
                      borderColor: colors.mainColor,
                      justifyContent: 'center',
                      alignItems: 'center',
                      flexDirection: 'row',
                    }}>
                    <Text
                      style={{
                        fontSize: 12,
                        color: colors.textColor,
                      }}>
                      {'積分(' + this.store.points + ') : '}
                    </Text>
                    <View
                      style={{
                        width: 200,
                        height: 20,
                        borderRadius: 20,
                        backgroundColor: colors.signupInputBgc,
                      }}>
                      <TextInput
                        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>
                <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>
            ) : (
              <View style={{marginTop: 20}}>
                <Text style ={{color:colors.mainColor}}>{this.store.text.paymentMethod}</Text>
                <Text
                  style={{color: colors.textColor, fontSize: 13, marginTop: 5}}>
                  {this.paymentMethodStringReturn(
                    this.data.payment_method_title,
                  )}
                </Text>
              </View>
            )}
          </View>
        </KeyboardAwareScrollView>
        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          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,
  },
});
