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

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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketMerchant_orderArgs } from 'esoftplay/cache/market/merchant_order/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UseForm } from 'esoftplay/cache/use/form/import';

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


export interface Merchant_input_receiptArgs {
  order_id: string
  shipping_resi: string
  shipping_resi_edit?: string
}
export interface Merchant_input_receiptProps {

}
export default function m(props: Merchant_input_receiptProps): any {
  const { order_id, shipping_resi, shipping_resi_edit } = LibNavigation.getArgsAll<Merchant_input_receiptArgs>(props)
  const resiInput = useRef<MarketInput_square>(null)
  const [form, setForm, reForm, delForm] = UseForm<any>('market/merchant_input_receipt', { waybill: shipping_resi })

  function showDialog(): void {
    if (resiInput.current?.getText() == '') {
      LibToastProperty.show(esp.lang("market/merchant_input_receipt", "empty_waybill"))
      return
    }
    LibDialog.custom(<View>
      <View style={{ borderBottomWidth: 1, borderBottomColor: '#f3f3f3', paddingVertical: 10, paddingHorizontal: 15 }}>
        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 22, textAlign: "left", letterSpacing: 0, color: '#4a4a4a' }}>{esp.lang("market/merchant_input_receipt", "waybill_info", String(resiInput?.current?.getText?.()))}</Text>
      </View>
      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginHorizontal: 20 }} >
        <TouchableOpacity onPress={() => { LibDialog.hide() }}>
          <View style={{ marginTop: 5 }}>
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, textAlign: "center", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("market/merchant_input_receipt", "text_back")}</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => { inputReceipt() }}>
          <View style={{ marginTop: 5 }}>
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, textAlign: "center", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("market/merchant_input_receipt", "btn_next")}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>)
  }

  function inputReceipt() {
    LibDialog.hide()
    LibProgress.show()
    new LibCurl('shop/order_merchant_detail_sending/' + order_id, { resi: resiInput.current?.getText() },
      (res) => {
        delForm()
        LibProgress.hide()
        esp.log("res", res);
        LibDialog.info(esp.lang("market/merchant_input_receipt", "sending_ok"), res)
        LibNavigation.backToRoot()
        LibNavigation.navigate<MarketMerchant_orderArgs>("market/merchant_order", { status: 5 })
      }, (error) => {
        LibProgress.hide()
        esp.log("error", error);
        LibDialog.warning(esp.lang("market/merchant_input_receipt", "sending_failed"), error?.message)
      }, 1
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        title={esp.lang("market/merchant_input_receipt", "header_title")}
      />
      <MarketInput_square
        ref={resiInput}
        label={esp.lang("market/merchant_input_receipt", "waybill_label")}
        placeholder={esp.lang("market/merchant_input_receipt", "placeholder_waybill")}
        autoCapitalize={"characters"}
        defaultValue={shipping_resi || shipping_resi_edit || form?.waybill}
        style={{ fontSize: 24, textAlign: 'center' }}
        multiline
        editable={!shipping_resi}
        onChangeText={(x) => setForm('waybill')(x)} />
      {
        shipping_resi == '' &&
        <MarketButton
          text={shipping_resi_edit ? esp.lang("market/merchant_input_receipt", "change_waybill") : esp.lang("market/merchant_input_receipt", "send_waybill")}
          colorBackground={"white"}
          colorBorder={MarketStyle.colorPrimaryMarket}
          color={MarketStyle.colorPrimaryMarket}
          buttonStyle={{ marginHorizontal: 17, marginVertical: 5 }}
          onPress={() => {
            // inputReceipt()
            showDialog()
          }} />
      }
    </View>
  )
}