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

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 { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_label } from 'esoftplay/cache/market/input_label/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketComplaint_orderArgs {
  data: any,
  order_id: string
}
export interface MarketComplaint_orderProps {

}
export default function m(props: MarketComplaint_orderProps): any {
  const { data, order_id } = LibNavigation.getArgsAll(props)
  const total = data?.product_list.reduce((acc: any, curr: any) => acc + parseInt(curr.total), 0)

  const products = data?.product_list?.map((item: any) => {
    return {
      id: parseInt(item.product_id),
      qty: parseInt(item.product_qty)
    }
  })

  function doComplaint() {
    let post = {
      sale_id: order_id,
      products: JSON.stringify(products),
      received: 0, //belum diterima
      conditions: 2, //kurang
      solution_buyer: 2, //refund
      notes: 'Saya belum menerima produk sama sekali'
    }
    LibProgress.show(esp.lang("market/complaint_order", "wait_complaint"))
    new LibCurl('shop/order_complaint', post,
      (res, msg) => {
        esp.log(res, msg)
        LibProgress.hide()
        LibNavigation.reset()
        LibNavigation.navigate('market/order')
      }, (msg) => {
        esp.log(msg);
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/complaint_order", "complaint_failed"), msg?.message)
      }, 1
    )
  }

  function showProductProblem() {
    MarketSlidingupProperty.add(
      <View style={styleId_Z1nIsH4} >
        <View style={styleId_1szId7} >
          <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
            <LibIcon name="close" size={25} />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_hU4G0} >{esp.lang("market/complaint_order", "problem_detail")}</Text>
        </View>
        <Text allowFontScaling={false} style={styleId_ZQFNhk} >{esp.lang("market/complaint_order", "total_not_receive", String(data?.product_list?.length))}</Text>
        <MarketInput_label label={esp.lang("market/complaint_order", "label_reason")} />
        <Text allowFontScaling={false} style={styleId_1v6tPu} >{esp.lang("market/complaint_order", "not_receive")}</Text>
        <MarketInput_label label={esp.lang("market/complaint_order", "label_prove")} />
        {
          LibUtils.checkUndefined(data, 'product_list.0') && data.product_list.map((item: any, i: number) => (
            <View key={i} >
              <View style={styleId_Z1ASMtl} >
                <View style={styleId_9wpOG}>
                  <LibPicture source={{ uri: item.product_image }} style={styleId_ZwOR0S} resizeMode="cover" />
                </View>
                <View style={{ flex: 1, marginLeft: 10 }} >
                  <Text allowFontScaling={false} numberOfLines={1} style={styleId_hTNFf} >{item?.product_name}</Text>
                  <Text allowFontScaling={false} numberOfLines={1} style={styleId_hTNFf} >{item?.product_qty + ' x ' + LibUtils.number(item?.product_price)}</Text>
                </View>
                <Text allowFontScaling={false} style={{}} >{LibUtils.money(item?.price)}</Text>
              </View>
              <MarketSection_menu size="line" />
            </View>
          ))
        }
      </View>
    )
    MarketSlidingupProperty.show()
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader onlyBack title={esp.lang("market/complaint_order", "header_title")} />
      <ScrollView>

        <View style={styleId_I5HLy} >
          <Text allowFontScaling={false} style={styleId_hTxEu} >{esp.lang("market/complaint_order", "bbo_solution")}</Text>
          <Text allowFontScaling={false} style={styleId_271IhQ} >{esp.lang("market/complaint_order", "bbo_investigate")}</Text>
          <Text allowFontScaling={false} style={styleId_Z2ugdJ4} >{esp.lang("market/complaint_order", "refund_total", LibUtils.money(total))}</Text>
          <MarketSection_menu size='line' />
          <Text allowFontScaling={false} style={styleId_ZQFNhk} >{esp.lang("market/complaint_order", "total_product", String(data?.product_list?.length))}</Text>
          <TouchableOpacity onPress={() => showProductProblem()} >
            <Text allowFontScaling={false} style={styleId_2kK9fh} >{esp.lang("market/complaint_order", "show_detail")}</Text>
          </TouchableOpacity>
        </View>


      </ScrollView>
      <View style={[styleId_Z1s1Xm7]} >
        <View style={styleId_Z2g6B45} >
          <Text allowFontScaling={false} numberOfLines={1} style={styleId_Z2h27zO} >{esp.lang("market/complaint_order", "total_problem")}</Text>
          <Text allowFontScaling={false} numberOfLines={1} style={styleId_Z2pQhgR}  >{LibUtils.money(total)}</Text>
        </View>
        <MarketButton
          onPress={() => {
            LibDialog.warningConfirm(esp.lang("market/complaint_order", "complaint_title"), esp.lang("market/complaint_order", "complaint_msg"), esp.lang("market/complaint_order", "complaint_confirm"), () => { doComplaint() }, esp.lang("market/complaint_order", "complaint_cancel"), () => { })
          }}
          text={esp.lang("market/complaint_order", "complaint_btn")}
          buttonStyle={styleId_1lOprH}
        />
      </View>
    </View>
  )
}
const styleId_Z1nIsH4: any = { backgroundColor: "white", paddingVertical: 15, paddingHorizontal: 17, borderTopRightRadius: 15, borderTopLeftRadius: 15 }
const styleId_1szId7: any = { flexDirection: "row", alignItems: "center" }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_hU4G0: any = { fontFamily: "Arial", fontSize: 16 }
const styleId_ZQFNhk: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", marginVertical: 15 }
const styleId_1v6tPu: any = { fontFamily: "Arial", fontSize: 14, marginVertical: 10 }
const styleId_Z1ASMtl: any = { flexDirection: "row", alignItems: "center", marginBottom: 15, marginTop: 10 }
const styleId_9wpOG: any = { backgroundColor: LibStyle.colorGrey, width: 50, height: 50 }
const styleId_ZwOR0S: any = { width: 50, height: 50 }
const styleId_hTNFf: any = { fontFamily: "Arial", fontSize: 14 }
const styleId_I5HLy: any = { marginHorizontal: 17, marginTop: 20 }
const styleId_hTxEu: any = { fontFamily: "Arial", fontSize: 12 }
const styleId_271IhQ: any = { fontFamily: "Arial", fontSize: 18, marginTop: 10 }
const styleId_Z2ugdJ4: any = { fontFamily: "Arial", fontSize: 12, marginTop: 10, marginBottom: 15 }
const styleId_2kK9fh: any = { color: MarketStyle.colorPrimaryMarket, fontFamily: "Arial", fontSize: 14 }
const styleId_Z1s1Xm7: any = { backgroundColor: "white", ...LibStyle.elevation(4) }
const styleId_Z2g6B45: any = { flexDirection: "row", paddingHorizontal: 17, paddingVertical: 15, alignItems: "center", borderBottomWidth: 0.5, borderBottomColor: '#f1f1f1' }
const styleId_Z2h27zO: any = { flex: 1, fontFamily: "Arial", fontSize: 14 }
const styleId_Z2pQhgR: any = { fontFamily: "Arial", fontSize: 16, color: MarketStyle.colorPrimaryMarket, fontWeight: "bold" }
const styleId_1lOprH: any = { marginHorizontal: 17, marginVertical: 10 }