// withHooks
// noPage

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { 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 { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';

import React from 'react';
import { TouchableOpacity, View } from 'react-native';

export interface MarketOrder_itemMerchant {
  created: string,
  invoice_merchant: string,
  merchant_id: string,
  merchant_name: string,
  merchant_image: string,
  option_id_primary_data: string,
  option_id_secondary_data: string,
  product_count: string,
  product_id: string,
  product_image: string,
  product_name: string,
  product_price: string,
  product_sale: string,
  product_qty: string,
  sale_id: string,
  shipping_fee: string,
  status: string,
  user_id: string,
}

export interface MarketOrder_itemProps {
  buyer_image: string,
  buyer_name: string,
  invoice: string,
  merchant: MarketOrder_itemMerchant[],
  shipping: string,
  status: string,
  total: string,
  exp_payment: string,
  url: string,
  from: string
}
/* product price untuk satuan  */

export default function m(props: MarketOrder_itemProps): any {
  const shipFee = props.merchant.map((s: MarketOrder_itemMerchant) => s.shipping_fee).reduce((acc, cur) => acc + Number(cur), 0) || 0
  const total = LibUtils.money(Number(props.total) + Number(props.shipping) + Number(shipFee))
  const user = UserClass.state().get()
  // esp.log(props);

  function finishOrder() {
    LibDialog.warningConfirm(esp.lang("market/order_item", "finish_title"), esp.lang("market/order_item", "finish_msg", total), esp.lang("market/order_item", "finish_confirm"), () => {
      // shop/order_detail_received GET: { "id":"id order"} POST:{"merchant_id":"id merchant tiap order"}
      esp.log(props.merchant[0].sale_id, props.merchant[0].merchant_id);
      LibProgress.show(esp.lang("market/order_item", "finish_waiting"))
      new LibCurl("shop/order_detail_received/" + props.merchant[0].sale_id, { merchant_id: props.merchant[0].merchant_id },
        (res) => {
          LibProgress.hide()
          LibNavigation.back()
          LibNavigation.navigate('market/order', { status: 7 })
        }, (err) => {
          LibProgress.hide()
          LibToastProperty.show(err?.message)
        }, 1
      )
    }, esp.lang("market/order_item", "finish_cancel"), () => { })
  }


  return (
    <>
      <TouchableOpacity
        testID='order-item'
        onPress={() => { LibNavigation.navigate('market/order_detail', { url: props.url, from: props.from }) }}
        style={styleId_Z2u66dg} >
        <View style={styleId_ZItSdM} >
          <LibTextstyle textStyle="footnote" text={props?.status >= "3" ? props?.merchant[0]?.invoice_merchant : props?.invoice} style={styleId_ZwGcPJ} />
        </View>
        {
          props?.merchant?.map?.((merhant, i) => (
            <View key={i} >
              {
                props?.from == "market/merchant_order" ?
                  <View style={styleId_2g6IND} >
                    <LibPicture source={{ uri: props?.buyer_image }} style={styleId_Z21d3io} />
                    <LibTextstyle textStyle="caption1" ellipsizeMode="middle" numberOfLines={1} text={props?.buyer_name} style={styleId_1nFboq} />
                  </View>
                  :
                  <View style={styleId_2g6IND} >
                    <LibPicture source={{ uri: merhant?.merchant_image }} style={styleId_Z21d3io} />
                    <LibTextstyle textStyle="caption1" ellipsizeMode="middle" numberOfLines={1} text={merhant?.merchant_name} style={styleId_1nFboq} />
                  </View>
              }
              <View style={styleId_Z1IS0fI} >
                <LibPicture source={{ uri: merhant?.product_image }} style={styleId_Z1n1O0x} />
                <View style={styleId_23fjhC} >
                  <LibTextstyle textStyle="callout" text={merhant?.product_name} />
                  {
                    merhant?.option_id_primary_data != '' &&
                    <View style={styleId_17srzJ} >
                      <LibTextstyle textStyle="caption2" text={merhant?.option_id_primary_data + (merhant?.option_id_secondary_data ? (" : " + merhant?.option_id_secondary_data) : '')} style={styleId_1rgcuB} />
                    </View>
                  }
                  <View style={styleId_Zrz44M} >
                    <LibTextstyle textStyle="footnote" text={merhant?.product_qty + 'x '} style={styleId_Z1hTWVv} />
                    {
                      merhant.product_sale ?
                        <>
                          {
                            (Number(merhant.product_sale) != Number(merhant.product_price)) &&
                            <LibTextstyle textStyle="footnote" text={LibUtils.money(merhant?.product_price)} style={styleId_Z9uXMN} />
                          }
                        </>
                        :
                        null
                    }
                    <LibTextstyle textStyle="footnote" text={' ' + LibUtils.money(merhant?.product_sale)} style={styleId_Z1hTWVv} />
                  </View>
                  {
                    merhant?.product_count > '1' &&
                    <View style={styleId_Z1IS0fI} >
                      <View style={styleId_rh1OH} >
                        <LibTextstyle textStyle={'caption2'} style={{ color: '#999' }} text={esp.lang("market/order_item", "all_product", String(Number(merhant?.product_count) - 1))} />
                      </View>
                    </View>
                  }
                </View>
              </View>
            </View>
          ))
        }
        <View style={styleId_LdslJ} >
          <LibTextstyle textStyle="caption1" text={moment(props?.merchant?.[0]?.created).localeFormat('DD MMM YYYY HH:mm')} style={styleId_ZcFIEN} />
          <LibTextstyle textStyle="footnote" text={esp.lang("market/order_item", "total", total)} style={styleId_GW3Y7} />
        </View>
      </TouchableOpacity>
      {
        esp.isDebug('') && (props?.merchant?.[0].status == '5' || props?.merchant?.[0]?.status == '9') && props?.merchant?.[0]?.user_id == user?.id &&
        < View style={styleId_2jiw7J} >
          <View style={styleId_ZeWBnz}>
            {/* <MarketButton
              textStyle={{ color: "white", fontSize: 14 }}
              onPress={() => { }}
              text={esp.lang("market/order_item", "track")}
              buttonStyle={{ marginRight: 5, marginLeft: 15 }} /> */}
          </View>
          <View style={styleId_ZeWBnz}>
            <MarketButton
              textStyle={styleId_ZDTqDu}
              onPress={() => { finishOrder() }}
              text={esp.lang("market/order_item", "btn_finish")}
              buttonStyle={styleId_1XxK3C} />
          </View>
        </View>
      }
      {
        props?.status == '1' && props?.exp_payment && props?.exp_payment != "0000-00-00 00:00:00" &&
        <View style={styleId_Z1GLe6k} >
          <View style={styleId_BO2C8} >
            <LibTextstyle textStyle='caption2' text={esp.lang("market/order_item", "exp_payment")} />
            <MarketCountdown hideTimeUnit expired={moment(props?.exp_payment).localeFormat('YYYY-MM-DD HH:mm:ss')} onExpired={() => { }}
              style={{ fontWeight: 'bold' }} />
          </View>
          <MarketButton text={esp.lang("market/order_item", "btn_pay_now")} onPress={() => { LibNavigation.navigate('market/payment_detail', { url: props.url }) }} />
        </View>
      }
      <MarketSection_menu size="small" />
    </>
  )
}
const styleId_Z2u66dg: any = { paddingHorizontal: 17, paddingVertical: 10 }
const styleId_ZItSdM: any = { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
const styleId_ZwGcPJ: any = { color: MarketStyle.colorPrimaryMarket }
const styleId_2g6IND: any = { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 0, borderBottomColor: "#eee", borderTopWidth: 1, borderTopColor: "#eee", paddingVertical: 10, marginVertical: 10 }
const styleId_Z21d3io: any = { borderRadius: 5, height: 25, width: 25, backgroundColor: '#eee' }
const styleId_1nFboq: any = { marginLeft: 10, flex: 1, fontWeight: 'bold' }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_Z1n1O0x: any = { height: 55, width: 55, borderRadius: 6, backgroundColor: '#eee' }
const styleId_23fjhC: any = { flex: 1, marginLeft: 10 }
const styleId_17srzJ: any = { flexDirection: 'row', flexWrap: 'wrap' }
const styleId_1rgcuB: any = { color: "#999", backgroundColor: '#f1f2f3', paddingHorizontal: 3, paddingVertical: 2, borderRadius: 3 }
const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
const styleId_Z1hTWVv: any = { color: '#777' }
const styleId_Z9uXMN: any = { textDecorationLine: 'line-through', textDecorationStyle: 'solid', color: '#777' }
const styleId_rh1OH: any = { borderRadius: 6, marginTop: 10, backgroundColor: '#f1f1f1', paddingHorizontal: 10, paddingVertical: 4 }
const styleId_LdslJ: any = { flexDirection: 'row', alignItems: 'center', borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: "#eee", borderTopColor: "#eee", marginTop: 10, paddingVertical: 10, marginBottom: 10, justifyContent: 'space-between' }
const styleId_ZcFIEN: any = { color: '#888' }
const styleId_GW3Y7: any = { fontWeight: "bold" }
const styleId_2jiw7J: any = { flexDirection: "row", justifyContent: "space-between", marginBottom: 10, marginTop: -10 }
const styleId_ZeWBnz: any = { width: LibStyle.width * 0.5 }
const styleId_ZDTqDu: any = { color: "white", fontSize: 14 }
const styleId_1XxK3C: any = { marginLeft: 5, marginRight: 15 }
const styleId_Z1GLe6k: any = { flexDirection: 'row', alignItems: 'center', marginTop: -10, paddingVertical: 10, backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.12), borderRadius: 4, paddingHorizontal: 20 }
const styleId_BO2C8: any = { marginRight: 10, flex: 1 }