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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibScroll } from 'esoftplay/cache/lib/scroll/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 { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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

export interface MarketOrder_tracingArgs {
  order_id: string,
  merchant: string
}

export interface MarketOrder_tracingProps {

}
export default function m(props: MarketOrder_tracingProps): any {
  const { order_id, merchant } = LibNavigation.getArgsAll<any>(props)
  const [data, setData] = useSafeState<any>()

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

  function getData() {
    new LibCurl(merchant.shipping_url, null,
      (res) => {
        esp.log(res);
        setData(res)
      }, (err) => {
        esp.log(err);
        LibToastProperty.show(err?.message)
      }, 1
    )

  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        title={esp.lang("market/order_tracing", "header_title")}
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}

      />
      <LibScroll onRefresh={getData} >
        <View style={{ flexDirection: "row", alignItems: 'center' }} >
          <View style={{ padding: 17, flex: 1 }} >
            <LibTextstyle textStyle="headline" text={merchant?.shipping_courier} />
            <LibTextstyle textStyle="footnote" text={esp.lang("market/order_tracing", "resi", merchant?.shipping_resi)} />
          </View>
          <TouchableOpacity style={{ marginRight: 17 }} onPress={() => {
            LibUtils.copyToClipboard(merchant?.shipping_resi).then(() => LibToastProperty.show(esp.lang("market/order_tracing", "copied")))
          }}>
            <LibTextstyle textStyle="footnote" text={esp.lang("market/order_tracing", "copy")} style={{ color: MarketStyle.colorPrimaryMarket }} />
          </TouchableOpacity>
        </View>
        <MarketSection_menu title={esp.lang("market/order_tracing", "order_status")} />
        <View style={{ overflow: "hidden" }} >
          {
            LibUtils.checkUndefined(data, "0") && data.map((item: any, i: number) => {
              return (
                <View key={i} style={{ paddingHorizontal: 17, flexDirection: 'row', alignItems: "center", paddingVertical: 10 }} >
                  <View style={{ height: 10, width: 10, borderRadius: 5, backgroundColor: MarketStyle.colorPrimaryMarket, marginRight: 10 }} />
                  <View style={{ flex: 1 }}  >
                    <LibTextstyle textStyle="footnote" text={item.created} style={{ color: "#BBB", fontSize: 12 }} />
                    <LibTextstyle textStyle="callout" text={item.title} style={{ fontSize: 14 }} />
                  </View>
                </View>
              )
            })
          }
          <View style={{ height: '100%', width: 1, backgroundColor: MarketStyle.colorPrimaryMarket, position: "absolute", bottom: 0, left: 21.5, top: 35, zIndex: -1 }} />
        </View>

        <MarketSection_menu />
      </LibScroll>
    </View>
  )
}