// withHooks
// noPage
import esp from 'esoftplay/esp';

import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketMerchant_detailArgs } from 'esoftplay/cache/market/merchant_detail/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 React from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketOrder_detail_item_productProps {
  notes: string,
  option_id_primary_data: string,
  option_id_secondary_data: string,
  product_image: string,
  product_name: string,
  product_price: string,
  product_sale: string,
  product_qty: string,
  url: string,
}

interface feeList {
  cod: string,
  insurance: string
}

export interface MarketOrder_detail_itemProps {
  // created: string,
  invoice_merchant: string,
  merchant_image: string,
  merchant_name: string,
  merchant_url: string,
  merchant_user_id: string,
  product_count: string,
  product_list: MarketOrder_detail_item_productProps[],
  shipping: string,
  shipping_courier: string,
  shipping_services: string,
  shipping_fee: string,
  total: string,
  shipping_fee_list: feeList,
  url_attach: string,
  url_attach_merchant: string,
  buyer_user_id: string
}
export default function m(props: MarketOrder_detail_itemProps): any {
  const userId = UserClass.state().get()?.id
  return (
    <>
      <View style={styleId_ZYaOl9} >
        <View style={styleId_20axQW} >
          <LibPicture source={{ uri: props.merchant_image }} style={styleId_ZMAPaU} resizeMode="cover" />
          <LibTextstyle textStyle={"callout"} text={props.merchant_name} style={styleId_14tcJb} />
          {/* <TouchableOpacity onPress={() => LibNavigation.navigate('market/merchant_detail', { url: props.merchant_url })} > */}
          <TouchableOpacity onPress={() => LibNavigation.navigate<MarketMerchant_detailArgs>('market/merchant_detail', { url: props.merchant_url })} >
            <LibTextstyle textStyle="footnote" text={esp.lang("market/order_detail_item", "visit")} style={styleId_ZwGcPJ} />
          </TouchableOpacity>
        </View>
        {
          props?.product_list?.map((product, i) => (
            <View key={i} >
              <TouchableOpacity
                onPress={() => { LibNavigation.navigate('market/product_detail', { url: product.url }) }}
                style={styleId_ZlJeUn} >
                <LibPicture source={{ uri: product.product_image }} style={styleId_1TEpWP} />
                <View style={styleId_Z17QIPm} >
                  <LibTextstyle textStyle={'callout'} text={product.product_name} />
                  {
                    product.option_id_primary_data != '' &&
                    <View style={styleId_17srzJ} >
                      <LibTextstyle textStyle="caption2" text={product.option_id_primary_data + (product.option_id_secondary_data ? (" : " + product.option_id_secondary_data) : '')} style={styleId_1rgcuB} />
                    </View>
                  }
                  <View style={styleId_Zrzc5a} >
                    <View style={styleId_1fmvBo} >
                      <LibTextstyle textStyle={'caption1'} text={LibUtils.number(product.product_qty) + ' x '} style={styleId_jBq3B} />
                      {
                        product.product_sale && (product.product_sale != product.product_price) &&
                        <LibTextstyle textStyle="footnote" text={LibUtils.money(product.product_price)} style={styleId_Z9uXMN} />
                      }
                      <LibTextstyle textStyle="footnote" text={" " + LibUtils.money(product.product_sale)} style={styleId_Z1hTWVv} />
                    </View>

                    <View style={styleId_ZcMJmd} />
                    <LibTextstyle textStyle={'caption1'} text={LibUtils.money(Number(product.product_sale) * Number(product.product_qty))} />
                  </View>
                </View>
              </TouchableOpacity>
              {
                product.notes != '' &&
                <View style={styleId_2wAeDl} >
                  <LibTextstyle text={esp.lang("market/order_detail_item", "notes")} textStyle="footnote" />
                  <View style={styleId_ZcMJmd} />
                  <LibTextstyle text={product?.notes} textStyle="caption1" />
                </View>
              }

            </View>
          ))
        }
        <View style={styleId_D8swX} />
        <MarketSection_menu size={"line"} />
        <View style={styleId_ZurTRF} >
          <LibTextstyle text={esp.lang("market/order_detail_item", "shipping")} textStyle="footnote" />
          <LibTextstyle text={props.shipping_courier + "(" + props.shipping_services + ")"} style={styleId_Z1PXeN5} textStyle="caption2" />
          <LibTextstyle text={LibUtils.money(props.shipping)} textStyle='caption1' style={styleId_TR7Py} />
        </View>
        {
          props.shipping_fee_list.cod &&
          <>
            <MarketSection_menu size={"line"} />
            <View style={styleId_ZurTRF} >
              <LibTextstyle text={esp.lang("market/order_detail_item", "cod_fee")} textStyle="footnote" />
              <View style={styleId_ZcMJmd} />
              <LibTextstyle text={LibUtils.money(Number(props.shipping_fee_list.cod))} textStyle="caption1" />
            </View>
          </>
        }
        {
          props.shipping_fee_list.insurance &&
          <>
            <MarketSection_menu size={"line"} />
            <View style={styleId_ZurTRF} >
              <LibTextstyle text={esp.lang("market/order_detail_item", "insurance")} textStyle="footnote" />
              <View style={styleId_ZcMJmd} />
              <LibTextstyle text={LibUtils.money(Number(props.shipping_fee_list.insurance))} textStyle="caption1" />
            </View>
          </>
        }
        <MarketSection_menu size={"line"} />
        {/* <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
          <LibTextstyle text={'Subtotal'} textStyle="footnote" />
          <View style={{ flex: 1 }} />
          <LibTextstyle text={LibUtils.money(Number(props.shipping) + Number(props.total) + Number(props.shipping_fee))} textStyle="caption1" />
        </View> */}


      </View>

      {
        props.merchant_user_id != userId &&
        <>
          <MarketSection_menu size={"line"} />
          <MarketButton
            text={esp.lang("market/order_detail_item", "chat_seller")}
            colorBackground={"white"}
            colorBorder={MarketStyle.colorPrimaryMarket}
            color={MarketStyle.colorPrimaryMarket}
            buttonStyle={styleId_Z1gmFFy}
            onPress={() => {
              esp.modProp('market/chat')?.openChat(props.merchant_user_id, undefined, undefined,
                {
                  type: 'market',
                  image: props.product_list[0].product_image,
                  title: props.product_list[0].product_name,
                  description: props.product_list[0].product_sale,
                  module: 'market/order_detail',
                  url: '',
                  data: {
                    invoice: props.invoice_merchant,
                    products_count: props.product_count
                  },
                  buttons: {
                    [props.buyer_user_id]: [
                      {
                        text: esp.lang("market/order_detail_item", "show_detail"),
                        module: '',
                        url: props.url_attach,
                        enabled: true
                      }
                    ],
                    [props.merchant_user_id]: [
                      {
                        text: esp.lang("market/order_detail_item", "show_detail1"),
                        module: '',
                        url: props.url_attach_merchant,
                        enabled: true
                      }
                    ]
                  }
                }
              )
            }} />
        </>
      }

      {/* <MarketSection_menu size={"small"} /> */}
    </>
  )
}
const styleId_ZYaOl9: any = { paddingHorizontal: 17, paddingVertical: 10, backgroundColor: "white", borderRadius: 3 }
const styleId_20axQW: any = { flexDirection: 'row', marginHorizontal: -17, paddingHorizontal: 17, paddingVertical: 10, marginTop: -10, borderBottomWidth: 1, borderBottomColor: "#eee" }
const styleId_ZMAPaU: any = { width: 24, height: 24, borderRadius: 4 }
const styleId_14tcJb: any = { marginLeft: 10, flex: 1 }
const styleId_ZwGcPJ: any = { color: MarketStyle.colorPrimaryMarket }
const styleId_ZlJeUn: any = { backgroundColor: "white", flexDirection: 'row', alignItems: 'center', marginBottom: 1, marginVertical: 5 }
const styleId_1TEpWP: any = { height: 40, width: 40, borderRadius: 5, resizeMode: 'cover' }
const styleId_Z17QIPm: any = { marginLeft: 10, flex: 1, marginVertical: 5 }
const styleId_17srzJ: any = { flexDirection: 'row', flexWrap: 'wrap' }
const styleId_1rgcuB: any = { color: "#999", backgroundColor: '#f1f2f3', paddingHorizontal: 3, paddingVertical: 2, borderRadius: 3 }
const styleId_Zrzc5a: any = { flexDirection: 'row', alignItems: 'center', marginTop: 4 }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_jBq3B: any = { color: "#888" }
const styleId_Z9uXMN: any = { textDecorationLine: 'line-through', textDecorationStyle: 'solid', color: '#777' }
const styleId_Z1hTWVv: any = { color: '#777' }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_2wAeDl: any = { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 17, paddingVertical: 10, marginTop: 10, marginHorizontal: -17, backgroundColor: '#cce5ff' }
const styleId_D8swX: any = { height: 10 }
const styleId_ZurTRF: any = { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 17, paddingVertical: 10, marginHorizontal: -17 }
const styleId_Z1PXeN5: any = { flex: 1, marginHorizontal: 10 }
const styleId_TR7Py: any = { textAlign: "right" }
const styleId_Z1gmFFy: any = { marginHorizontal: 17, marginVertical: 5 }