// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketConfigProperty } from 'esoftplay/cache/market/config/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketOrder_detail_buttons } from 'esoftplay/cache/market/order_detail_buttons/import';
import { MarketOrder_detail_item } from 'esoftplay/cache/market/order_detail_item/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import { useEffect, useRef } from 'react';
import { Animated, Dimensions, Linking, RefreshControl, Text, TouchableOpacity, View } from 'react-native';

moment().locale('id')

export interface MarketOrder_detailArgs {
  url: string,
  shipping_resi?: string,
  from?: string,
}

export interface MarketOrder_detailProps {

}

export function extendShippingForMerchant(sale_id: string, merchant_id: string, onSuccess: () => void) {
  const marketConfig = MarketConfigProperty.state().get()

  LibDialog.custom(
    <View style={{ margin: -10, marginBottom: -20 }}>
      <View style={{ padding: 15 }} >
        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, fontWeight: 'bold' }} >Perpanjang Masa Garansi?</Text>
        <Text allowFontScaling={false} style={{ marginTop: 8, fontFamily: 'Arial', fontSize: 14, lineHeight: 20 }} >{esp.lang("market/order_detail", "guarantee_extend", marketConfig?.shop?.extension_packing_time)}</Text>
      </View>
      <View style={{ flexDirection: 'row', marginTop: 10, borderTopWidth: 1, borderTopColor: '#e6e6e6' }}>
        <TouchableOpacity style={{ flex: 1, alignItems: 'center', padding: 15 }} onPress={() => { LibDialog.hide() }} >
          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14 }} >Batal</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{ flex: 1, alignItems: 'center', padding: 15 }} onPress={() => {
          LibDialog.hide()
          LibProgress.show(esp.lang("market/order_detail", "extend_wait"))
          new LibCurl("shop/order_detail_extended?sale_id=" + sale_id, { merchant_id: merchant_id },
            (res) => {
              onSuccess()
              LibDialog.info(esp.lang("market/order_detail", "extend_ok"), res)
              LibProgress.hide()
            }, (err) => {
              LibProgress.hide()
              LibToastProperty.show(err?.message)
            }, 1
          )
        }}>
          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, color: MarketStyle.colorPrimaryMarket }} >Lanjutkan</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const { height } = Dimensions.get('screen');

const DEVICE_HEIGHT = Dimensions.get('screen').height;
const WINDOW_HEIGHT = Dimensions.get('window').height;
const STATUS_BAR = LibStyle.STATUSBAR_HEIGHT
const navHeight = DEVICE_HEIGHT - WINDOW_HEIGHT - STATUS_BAR

const _navHeight = navHeight > STATUS_BAR ? navHeight : navHeight < 10 ? navHeight + 40 : navHeight + 32

const NAVIGATION_HEIGHT = DEVICE_HEIGHT - WINDOW_HEIGHT > 0 ? _navHeight : 0

export default function m(props: MarketOrder_detailProps): any {
  const { url, from, shipping_resi } = LibNavigation.getArgsAll(props)
  const [data, setData] = useSafeState<any>()
  const [paymentDetail, setPaymentDetail] = useSafeState<any>({})
  const marketConfig = MarketConfigProperty.state().get()

  let scrollY = useRef(new Animated.Value(0)).current

  const headerHeight = 56 + LibStyle.STATUSBAR_HEIGHT

  const [bottomAction, setBottomAction] = useSafeState<any>()
  const topEdge = bottomAction?.y - height + bottomAction?.height + headerHeight + NAVIGATION_HEIGHT + (LibStyle.isIphoneX ? 35 : 0) + LibStyle.STATUSBAR_HEIGHT

  useEffect(() => {
    getAll()
  }, [])

  function getAll() {
    new LibCurl(url, null,
      (res, msg) => {
        esp.log(res, "result", url);
        setData(res)
        new LibCurl(res.payment_url, null,
          (result) => {
            setPaymentDetail(result)
          }, (err) => {
            esp.log(err);
          })
      },
      (msg) => {
        LibToastProperty.show(msg?.message)
      }, 1
    )
  }

  if (!data) {
    return (
      <View style={{ flex: 1 }} >
        <MarketHeader leftIcon={{ name: "close", onPress: () => LibNavigation.back() }} title={esp.lang("market/order_detail", "header_title")} subtitle={esp.lang("market/order_detail", "header_subtitle")} />
        <LibSkeleton>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row" }} >
            <View style={{ flex: 1 }}>
              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
              <View style={{ width: '40%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
            </View>
            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row" }} >
            <View style={{ flex: 1 }}>
              <View style={{ width: '30%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
              <View style={{ width: '70%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
              <View style={{ width: '50%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
            </View>
            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", borderBottomWidth: 0.5 }} >
            <View style={{ flex: 1 }}>
              <View style={{ width: '70%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
            </View>
            <View style={{ width: '30%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row" }} >
            <View style={{ flex: 1 }}>
              <View style={{ width: '65%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 10 }} />
            </View>
            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center' }} >
            <View style={{ width: 15, height: 15, borderRadius: 7.5, backgroundColor: 'white' }} />
            <View style={{ flex: 1, marginLeft: 10 }}>
              <View style={{ width: '60%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
              <View style={{ width: '60%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
            </View>
            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ borderWidth: 1, paddingHorizontal: 17, padding: 10 }}>
            <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center', borderBottomWidth: 0.5, paddingBottom: 10 }} >
            <View style={{ width: 30, height: 30, borderRadius: 5, backgroundColor: 'white' }} />
            <View style={{ flex: 1 }} >
              <View style={{ width: '70%', height: 15, borderRadius: 10, backgroundColor: "white", marginLeft: 10 }} />
            </View>
            <View style={{ width: '20%', height: 20, borderRadius: 10, backgroundColor: "white", marginLeft: 10 }} />
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center', borderBottomWidth: 0.5, paddingBottom: 10 }} >
            <View style={{ width: 40, height: 40, borderRadius: 5, backgroundColor: 'white' }} />
            <View style={{ flex: 1, marginLeft: 10 }}>
              <View style={{ width: '80%', height: 20, borderRadius: 10, backgroundColor: "white", marginBottom: 5 }} />
              <View style={{ flexDirection: 'row' }}>
                <View style={{ flex: 1 }}>
                  <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
                </View>
                <View style={{ width: '30%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
              </View>
            </View>
          </View>
          <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", alignItems: 'center', borderBottomWidth: 0.5, paddingBottom: 10 }} >
            <View style={{ flex: 1 }}>
              <View style={{ width: '70%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
            </View>
            <View style={{ width: '25%', height: 15, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ marginHorizontal: 20, borderWidth: 1, borderRadius: 10, padding: 10, alignItems: 'center', marginVertical: 10 }}>
            <View style={{ width: '60%', height: 20, borderRadius: 10, backgroundColor: "white" }} />
          </View>
          <View style={{ height: 20, backgroundColor: 'white' }} />
        </LibSkeleton>
      </View>
    )
  }


  // @ts-ignore
  const address = data && data?.merchant && Object.values(data.merchant)[0].shipping_address
  const merchant: any = data && data?.merchant && Object.values(data.merchant)[0]

  return (
    <View style={{ flex: 1 }} >
      <View style={{ zIndex: 99, backgroundColor: 'white', height: headerHeight }} >
        <MarketHeader
          leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
          title={esp.lang("market/order_detail", "header_title1")}
          subtitle={esp.lang("market/order_detail", "header_subtitle1")}
        />
      </View>
      <Animated.ScrollView
        refreshControl={<RefreshControl onRefresh={getAll} refreshing={false} />}
        showsVerticalScrollIndicator={false}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })} >
        <View style={{ paddingHorizontal: 17, paddingTop: 10, flexDirection: "row", }} >
          <View style={{ flex: 1 }} >
            <LibTextstyle textStyle="caption1" text={esp.lang("market/order_detail", "order_status")} style={{}} />
            <LibTextstyle textStyle="title1" text={data.status_title} style={{ fontWeight: 'bold', fontSize: 18 }} />
            {/* {
                    from != 'market/merchant_order' && data.status == 3 &&
                    <LibTextstyle textStyle="callout" text="Pesanan anda telah diteruskan dan menunggu approval merchant" style={{ fontSize: 14 }} />
                  } */}
            {
              merchant.info != '' &&
              <LibTextstyle textStyle="callout" text={merchant?.info} style={{ fontSize: 13, color: MarketStyle.colorPrimaryMarket }} />
            }


            {
              (data.status == 2 || data.status == 8) && LibUtils.checkUndefined(merchant, 'status_detail.0') &&
              <View style={{ flex: 1 }}  >
                <LibTextstyle textStyle="callout" text={merchant?.status_detail[0]?.title} style={{ fontSize: 14 }} />
              </View>
            }
          </View>
          {
            LibUtils.checkUndefined(merchant, 'status_detail') &&
            <TouchableOpacity onPress={() => LibNavigation.navigate('market/order_status_detail', { status: merchant?.status, status_detail: merchant?.status_detail, data: data })} >
              <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail", "show_detail")} style={{ color: MarketStyle.colorPrimaryMarket }} />
            </TouchableOpacity>
          }
        </View>
        {
          (data.status == 3 || data.status == 4) &&
          <View style={{ paddingVertical: 10, flexDirection: 'row', alignItems: 'center', paddingBottom: 10, marginHorizontal: 17 }} >
            <LibTextstyle textStyle="callout" text={esp.lang("market/order_detail", "cancel_auto")} style={{ fontSize: 13, flex: 1 }} />
            <MarketCountdown expired={moment(merchant?.time_limit).localeFormat('YYYY-MM-DD HH:mm:ss')}
              onlyDay
              style={{ fontFamily: 'ArialBold', color: 'white', fontSize: 12 }}
              containerStyle={{ backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.7), paddingHorizontal: 15, borderRadius: 20 }} />
          </View>
        }

        {
          data.status == 4 && data.is_merchant == 0 && (merchant.extension == '' || merchant.extension == null) &&
          <>
            <MarketSection_menu size={"small"} />
            <TouchableOpacity onPress={() => { extendShippingForMerchant(data.id, merchant.merchant_id, getAll) }} style={{ paddingHorizontal: 17, paddingVertical: 10 }} >
              <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, fontWeight: 'bold', color: MarketStyle.colorPrimaryMarket }} >{esp.lang("market/order_detail", "order_not_send")}</Text>
              <View style={{ flexDirection: 'row', marginTop: 8 }} >
                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'Arial', fontSize: 14, lineHeight: 20 }} >{esp.lang("market/order_detail", "extend")}</Text>
                <LibIcon name="chevron-right" size={28} />
              </View>
            </TouchableOpacity>
          </>
        }

        <MarketSection_menu title={esp.lang("market/order_detail", "address")} />
        <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row" }} >
          <View style={{ flex: 1 }} >
            {
              // data?.is_merchant != 1 &&
              <LibTextstyle textStyle="callout" text={address.recipient || address.name} />
            }
            <LibTextstyle textStyle="footnote" text={address.address + '\n' + address.location_name + ' ' + address.zipcode + '\n' + address.phone} style={{ marginTop: 5, color: "#888" }} />
          </View>
          <TouchableOpacity onPress={() => {
            // data.is_merchant == 1 ?
            //   LibUtils.copyToClipboard(address.address + '\n' + address.location_name + ' ' + address.zipcode + '\n' + address.phone).then(() => LibToastProperty.show("BERHASIL DISALIN"))
            //   :
            LibUtils.copyToClipboard((address.recipient || address.name) + '\n' + address.address + '\n' + address.location_name + ' ' + address.zipcode + '\n' + address.phone).then(() => LibToastProperty.show(esp.lang("market/order_detail", "copied")))
          }} >
            <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail", "copy")} style={{ color: MarketStyle.colorPrimaryMarket }} />
          </TouchableOpacity>
        </View>
        {
          //kondisi jika merchant dan status order sudah dikemas
          data.is_merchant == 1 && data.status > 3 && merchant.shipping_resi != '' && merchant.shipping_resi != '' && merchant.shipping_ref != '' &&
          <>
            {
              merchant.shipping_code == 'gosend' ?
                < MarketButton onPress={() => { LibNavigation.navigate('market/order_detail_label_print', { url: merchant.shipping_label }) }}
                  text={esp.lang("market/order_detail", "label_print")}
                  colorBackground={"white"}
                  colorBorder={MarketStyle.colorPrimaryMarket}
                  color={MarketStyle.colorPrimaryMarket}
                  buttonStyle={{ marginHorizontal: 17, marginBottom: 10 }}
                />
                :
                merchant.shipping_method != 0 ?
                  <MarketButton onPress={() => { LibNavigation.navigate('market/order_detail_label_print', { url: merchant.shipping_label }) }}
                    text={esp.lang("market/order_detail", "label_print1")}
                    colorBackground={"white"}
                    colorBorder={MarketStyle.colorPrimaryMarket}
                    color={MarketStyle.colorPrimaryMarket}
                    buttonStyle={{ marginHorizontal: 17, marginBottom: 10 }}
                  />
                  : null
            }
          </>
        }
        <MarketSection_menu title={esp.lang("market/order_detail", "detail_order")} />
        <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#eee" }} >
          <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 10 }} >
            <LibTextstyle text={esp.lang("market/order_detail", "order_date")} textStyle="footnote" style={{}} />
            <View style={{ flex: 1 }} />
            <LibTextstyle text={merchant?.created} textStyle="footnote" style={{}} />
          </View>
          <MarketSection_menu size={"line"} />
          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }} >
            <View style={{ alignItems: "center", flexDirection: "row" }} >
              <LibTextstyle text={data.status >= '3' ? merchant?.invoice_merchant : data?.invoice} textStyle="footnote" style={{}} />
              <TouchableOpacity onPress={() => {
                LibUtils.copyToClipboard(data.status >= '3' ? merchant?.invoice_merchant : data?.invoice)
                LibToastProperty.show(esp.lang("market/order_detail", "invoice_copy"))
              }} style={{ marginLeft: 5 }} >
                <LibIcon name="content-copy" size={16} />
              </TouchableOpacity>
            </View>
            <View style={{ flex: 1 }} />
            <TouchableOpacity onPress={() => LibNavigation.navigate('market/order_detail_invoice', { url: merchant?.invoice_url, invoice: data.status >= '3' ? merchant?.invoice_merchant : data?.invoice })} >
              <LibTextstyle text={esp.lang("market/order_detail", "show")} textStyle="footnote" style={{ color: MarketStyle.colorPrimaryMarket }} />
            </TouchableOpacity>
          </View>
        </View>
        {
          data?.status > 3 && merchant && merchant.shipping_resi != '' &&
          <>
            <MarketSection_menu title={esp.lang("market/order_detail", "shipping_Status")} rightView={
              <>
                {
                  merchant?.shipping_live_url != "" &&
                  <TouchableOpacity onPress={() => {
                    if (!!Linking.canOpenURL(merchant.shipping_live_url)) {
                      Linking.openURL(merchant.shipping_live_url)
                    }
                  }} style={{ alignItems: 'center', justifyContent: 'center', marginTop: -5 }} >
                    <LibTextstyle text={esp.lang("market/order_detail", "live_tracking")} textStyle="footnote" style={{ color: MarketStyle.colorPrimaryMarket }} />
                  </TouchableOpacity>
                }
              </>
            } />
            <View style={{ paddingHorizontal: 17, paddingVertical: 10 }} >
              <View style={{ flexDirection: 'row', alignItems: "center" }} >
                <View style={{ height: 10, width: 10, borderRadius: 5, backgroundColor: MarketStyle.colorPrimaryMarket, marginRight: 10 }} />
                <View style={{ flex: 1 }}  >
                  {
                    data?.status == 4 ?
                      <LibTextstyle textStyle="callout" text={esp.lang("market/order_detail", "waiting_send")} style={{ fontSize: 14 }} />
                      :
                      <LibTextstyle textStyle="callout" text={merchant?.shipping_waybill?.title} style={{ fontSize: 14 }} />
                  }
                  <LibTextstyle textStyle="footnote" text={merchant?.shipping_courier + " : " + merchant?.shipping_resi} style={{ color: "#888", fontSize: 12 }} />
                  <LibTextstyle textStyle="footnote" text={moment(merchant?.shipping_waybill?.created).localeFormat('YYYY-MM-DD HH:mm')} style={{ color: "#888", fontSize: 12 }} />
                </View>
                {
                  data?.status > 4 &&
                  <TouchableOpacity style={{}} onPress={() => LibNavigation.navigate("market/order_tracing", { order_id: data.id, merchant: merchant })} >
                    <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail", "detail")} style={{ color: MarketStyle.colorPrimaryMarket }} />
                  </TouchableOpacity>
                }
              </View>
              <View style={{ height: 40, width: 1, backgroundColor: MarketStyle.colorPrimaryMarket, position: "absolute", bottom: 0, left: 21.5 }} />
            </View>
          </>
        }
        <MarketSection_menu title={esp.lang("market/order_detail", "product")} />
        {
          Object.values(data?.merchant).map((merchant: any, i: number) => <MarketOrder_detail_item key={i} buyer_user_id={data?.buyer_user_id} {...merchant} />)
        }
        <MarketSection_menu size={"small"} />
        <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 10, borderTopWidth: 1, borderTopColor: "#eee" }} >
          <View style={{ flexDirection: 'row', alignItems: 'center' }} >
            <LibTextstyle text={esp.lang("market/order_detail", "bill_total")} textStyle="footnote" style={{}} />
            <View style={{ flex: 1 }} />
            {
              data.status >= 3 ?
                <LibTextstyle text={LibUtils.money(merchant?.total)} textStyle="footnote" style={{}} />
                :
                <LibTextstyle text={LibUtils.money(data?.total)} textStyle="footnote" style={{}} />
            }
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
            <LibTextstyle text={esp.lang("market/order_detail", "shipping_total")} textStyle="footnote" style={{}} />
            <View style={{ flex: 1 }} />
            {
              data.status >= 3 ?
                <LibTextstyle text={LibUtils.money(merchant?.shipping)} textStyle="footnote" style={{}} />
                :
                <LibTextstyle text={LibUtils.money(data?.shipping)} textStyle="footnote" style={{}} />
            }
          </View>
          {
            data.status >= 3 && merchant?.shipping_fee_list?.insurance &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "insurance")} textStyle="footnote" style={{}} />
              <View style={{ flex: 1 }} />
              <LibTextstyle text={LibUtils.money(merchant?.shipping_fee_list?.insurance)} textStyle="footnote" style={{}} />
            </View>
          }
          {
            data.status >= 3 && merchant?.shipping_fee_list?.cod &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "cod")} textStyle="footnote" style={{}} />
              <View style={{ flex: 1 }} />
              <LibTextstyle text={LibUtils.money(merchant?.shipping_fee_list?.cod)} textStyle="footnote" style={{}} />
            </View>
          }
          {
            data?.v_code > 0 &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "payment_verif")} textStyle="footnote" style={{}} />
              <View style={{ flex: 1 }} />
              <LibTextstyle text={LibUtils.money(data?.v_code)} textStyle="footnote" style={{}} />
            </View>
          }
          {
            data?.fee > 0 &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "charge")} textStyle="footnote" style={{}} />
              <View style={{ flex: 1 }} />
              <LibTextstyle text={LibUtils.money(Number(data?.fee))} textStyle="footnote" style={{}} />
            </View>
          }
          {
            data?.shipping_voucher > 0 &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "freeong")} textStyle="footnote" style={{ flex: 1, flexWrap: 'wrap' }} />
              <View style={{ flex: 1 }} />
              <LibTextstyle text={"- " + LibUtils.money(Number(data?.shipping_voucher))} textStyle="footnote" style={{}} />
            </View>
          }
          {
            data?.vouchers?.length > 0 && data?.vouchers?.map((item: any, i: number) => {
              return (
                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
                  <LibTextstyle text={item?.voucher_title} textStyle="footnote" style={{ flex: 1, flexWrap: 'wrap' }} />
                  <View style={{ flex: 1 }} />
                  <LibTextstyle text={"- " + LibUtils.money(Number(item?.amount))} textStyle="footnote" style={{}} />
                </View>
              )
            })
          }
          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
            <LibTextstyle text={esp.lang("market/order_detail", "total_bill")} textStyle="footnote" style={{}} />
            <View style={{ flex: 1 }} />
            {
              data.status >= 3 ?
                <LibTextstyle text={LibUtils.money((Number(merchant?.shipping) + Number(merchant?.total) + Number(data?.fee) + Number(merchant?.shipping_fee)) - (Number(data?.voucher) + Number(data?.shipping_voucher)))} textStyle="footnote" style={{}} />
                :
                <LibTextstyle text={LibUtils.money((Number(data?.shipping) + Number(data?.total) + Number(data?.fee) + Number(data?.v_code) - (Number(data?.voucher) + Number(data?.shipping_voucher))))} textStyle="footnote" style={{}} />
            }
          </View>
          {
            data?.is_merchant == 0 && data?.total_complaint != 0 &&
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "total_complaint")} textStyle="footnote" style={{}} />
              <View style={{ flex: 1 }} />
              <LibTextstyle text={'+' + LibUtils.money(Number(data?.total_complaint))} textStyle="footnote" style={{ color: MarketStyle.colorGreen }} />
            </View>
          }

          {
            data?.is_merchant == 1 &&
            <>
              {
                merchant?.fee_service != 0 &&
                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
                  <LibTextstyle text={esp.lang("market/order_detail", "fee")} textStyle="footnote" style={{}} />
                  <View style={{ flex: 1 }} />
                  <LibTextstyle text={LibUtils.money(Number(merchant.fee_service))} textStyle="footnote" style={{}} />
                </View>
              }
              {
                data?.total_complaint != 0 &&
                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
                  <LibTextstyle text={esp.lang("market/order_detail", "compaint_total")} textStyle="footnote" style={{}} />
                  <View style={{ flex: 1 }} />
                  <LibTextstyle text={'-' + LibUtils.money(Number(data?.total_complaint))} textStyle="footnote" style={{ color: LibStyle.colorRed }} />
                </View>
              }
              <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
                {
                  data?.status >= 7 ?
                    <LibTextstyle text={esp.lang("market/order_detail", "received")} textStyle="footnote" style={{}} />
                    :
                    <LibTextstyle text={esp.lang("market/order_detail", "receiving")} textStyle="footnote" style={{}} />
                }
                <View style={{ flex: 1 }} />
                {
                  data.status >= 3 ?
                    merchant.shipping_cashless == 1 ?
                      <LibTextstyle text={LibUtils.money((Number(merchant?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
                      :
                      <LibTextstyle text={LibUtils.money((Number(merchant?.shipping) + Number(merchant?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
                    :
                    merchant.shipping_cashless == 1 ?
                      <LibTextstyle text={LibUtils.money((Number(data?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
                      :
                      <LibTextstyle text={LibUtils.money((Number(data?.shipping) + Number(data?.total) + /* Number(data?.fee) + */ Number(data?.v_code)) - Number(merchant.fee_service) - Number(data?.total_complaint))} textStyle="footnote" style={{}} />
                }
              </View>
            </>
          }
        </View>
        <MarketSection_menu title={esp.lang("market/order_detail", "payment_method")} />
        <View style={{ backgroundColor: "white", paddingHorizontal: 17, paddingVertical: 12 }} >
          <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }} >
            {
              LibUtils.checkUndefined(paymentDetail, "payment.payment_id") &&
              <LibPicture source={{ uri: paymentDetail?.payment?.image }} style={{ width: 55.7, height: 40, marginRight: 5 }} resizeMode="contain" />
            }
            <LibTextstyle textStyle={"callout"} text={data?.payment_title} />
          </View>
          {
            LibUtils.checkUndefined(paymentDetail, "params.expired") && data.is_merchant != 1 && data.status == 1 /* (data.status == 2 || data.status == 8) */ &&
            <>
              <LibTextstyle textStyle={"footnote"} text={paymentDetail?.params?.va_no ? esp.lang("market/order_detail", "va_number") : esp.lang("market/order_detail", "bill_number")} style={{ marginTop: 10 }} />
              <View style={{ flexDirection: "row", alignItems: "center", marginTop: 10 }} >
                <Text allowFontScaling={false} style={{ flex: 1, fontSize: 20, fontWeight: "bold" }} >{paymentDetail?.params?.va_no || paymentDetail?.params?.cvs_no}</Text>
                <TouchableOpacity activeOpacity={1} style={{ alignItems: "center", justifyContent: 'center', flexDirection: "row" }}
                  onPress={() => {
                    LibUtils.copyToClipboard(paymentDetail?.params?.va_no || paymentDetail?.params?.cvs_no).then(() => LibToastProperty.show(esp.lang("market/order_detail", "va_copied")))
                  }} >
                  <LibIcon name="content-copy" style={{ color: '#2e83bb' }} size={14} />
                  <LibTextstyle textStyle={"footnote"} text={esp.lang("market/order_detail", "va_copy")} style={{ color: '#2e83bb', marginLeft: 5 }} />
                </TouchableOpacity>
              </View>
              <LibTextstyle textStyle={"footnote"} text={esp.lang("market/order_detail", "time_check")} style={{ marginTop: 10, fontSize: 12 }} />
              <TouchableOpacity onPress={() => { LibNavigation.navigate("market/order_detail_payment_hint", { data: paymentDetail }) }} style={{ marginTop: 5 }} >
                <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#16a085" }} >{esp.lang("market/order_detail", "how_to_pay")}</Text>
              </TouchableOpacity>
            </>
          }
          {
            data.status == 1 && data.exp_payment &&
            <View style={{ marginTop: 10 }} >
              <LibTextstyle text={esp.lang("market/order_detail", "expired_payment")} textStyle="footnote" style={{ fontSize: 12 }} />
              <MarketCountdown
                expired={moment(data?.exp_payment).localeFormat('YYYY-MM-DD HH:mm:ss')}
                onExpired={getAll}
                style={{ fontSize: 18, fontWeight: 'bold', color: MarketStyle.colorPrimaryMart }}
              />
            </View>
          }
        </View>

        {/* {
          esp.isDebug() && data.is_merchant ?
            <>
              {
                (data.status == 3 || (data.status == 4 && merchant.shipping_method == 0) || (data.status == 5 && merchant.shipping_method_change == 1)) &&
                <View
                  onLayout={ev => setBottomAction(ev.nativeEvent.layout)}
                  style={{ height: 50, backgroundColor: 'white' }}
                />
              }
            </>
            :
            <>
              {
                (data.status == 5) &&
                <View
                  onLayout={ev => setBottomAction(ev.nativeEvent.layout)}
                  style={{ height: 50, backgroundColor: 'white' }}
                />
              }
            </>

        } */}

        <MarketOrder_detail_buttons data={data} price={Number(data?.shipping) + Number(data?.total)} config={marketConfig} shipping_resi={shipping_resi} order_url={url} />
      </Animated.ScrollView>

      {/* {
        esp.isDebug() && bottomAction &&
        <Animated.View style={{
          height: 50,
          position: 'absolute', bottom: 0, left: 0, right: 0,
          paddingHorizontal: 17,
          backgroundColor: 'white',
          transform: [{
            translateY: scrollY.interpolate({
              inputRange: [-1, 0, topEdge - 1, topEdge, topEdge + 1],
              outputRange: [0, 0, 0, 0, -1]
            })
          }]
        }}>
          {
            data.is_merchant ?
              <>
                {
                  data.status == 3 &&
                  <MarketButton
                    text={esp.lang("market/order_detail", "btn_process")}
                    textStyle={{ color: '#f1f1f1' }}
                    buttonStyle={{ marginVertical: 5 }}
                    onPress={() => { MarketOrder_detail_buttonsProperty.approveOrder(data.id) }} />
                }
                {
                  data.status == 4 && merchant.shipping_method == 0 &&
                  <MarketButton
                    text={esp.lang("market/order_detail", "btn_set_shipping")}
                    textStyle={{ color: '#f1f1f1' }}
                    buttonStyle={{ marginVertical: 5 }}
                    onPress={() => {
                      LibNavigation.navigate<MarketMerchant_sending_methodArgs>('market/merchant_sending_method', { order_id: data.id, shipping_code: merchant.shipping_code, shipping_label: merchant.shipping_label })
                    }} />
                }
                {
                  data.status == 5 && merchant.shipping_method_change == 1 &&
                  <MarketButton
                    text={esp.lang("market/order_detail", "btn_re_shipping")}
                    textStyle={{ color: '#f1f1f1' }}
                    buttonStyle={{ marginVertical: 5 }}
                    onPress={() => { MarketOrder_detail_buttonsProperty.reSettingShipping(data.id, merchant) }} />
                }
              </>
              :
              <>
                {
                  data.status == 5 &&
                  <>
                    {
                      merchant.delivered == 0 &&
                      <MarketButton
                        text={esp.lang("market/order_detail", "btn_track")}
                        textStyle={{ color: '#f1f1f1' }}
                        buttonStyle={{ marginVertical: 5 }}
                        onPress={() => {
                          LibNavigation.navigate<MarketOrder_tracingArgs>("market/order_tracing", { order_id: data.id, merchant: merchant })
                        }} />
                      ||
                      <MarketButton
                        text={esp.lang("market/order_detail", "btn_product_received")}
                        textStyle={{ color: '#f1f1f1' }}
                        buttonStyle={{ marginVertical: 5 }}
                        onPress={() => { MarketOrder_detail_buttonsProperty.finishOrder(merchant, data) }} />
                    }
                  </>
                }
              </>
          }
        </Animated.View>
      } */}
    </View >
  )
}