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


import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketMerchant_orderArgs } from 'esoftplay/cache/market/merchant_order/import';
import { MarketMerchant_sending_methodArgs } from 'esoftplay/cache/market/merchant_sending_method/import';
import { MarketOrder_detailArgs } from 'esoftplay/cache/market/order_detail/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketMerchant_sending_method_find_driverArgs {
  order_id: string,
  shipping_label: string,
  shipping_code: string
}
export interface MarketMerchant_sending_method_find_driverProps {

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

  useEffect(() => {
    findDriver()
    const curl = setInterval(findDriver, 10000)
    return () => clearInterval(curl)
  }, [])

  function findDriver() {
    new LibCurl('shop/order_merchant_detail_sending_find/' + order_id, null,
      (res, msg) => {
        setData(res)
      }, (msg) => {
        LibNavigation.back()
        LibDialog.warning(esp.lang("market/merchant_sending_method_find_driver", "failed_find"), msg?.message)
      }, 1
    )
  }

  function setShippingMethod() {
    LibNavigation.replace<MarketMerchant_sending_methodArgs>('market/merchant_sending_method', { order_id: order_id, shipping_code: shipping_code, shipping_label: shipping_label })
  }

  function openDetail() {
    LibNavigation.replace<MarketMerchant_orderArgs>('market/merchant_order', { status: 4 })
    LibNavigation.navigate<MarketOrder_detailArgs>('market/order_detail', { url: data?.url })
  }

  return (
    <View style={{ flex: 1 }}>
      <MarketHeader onlyBack title={esp.lang("market/merchant_sending_method_find_driver", "header_title")} />
      {
        !data ? <LibLoading /> :
          <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center', marginHorizontal: 20 }} >
            {
              data?.code == 1 && //sedang mencari driver
              <>
                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 18, textAlign: 'center' }} >{data?.info}</Text>
                <ActivityIndicator color={MarketStyle.colorPrimaryMarket} size='large' style={{ marginTop: 20 }} />
              </>
            }
            {
              data?.code == 2 && //driver menuju lokasi
              <>
                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 18, textAlign: 'center' }} >{data?.info}</Text>
                <MarketButton buttonStyle={{ marginVertical: 15 }} textStyle={{ fontSize: 14 }} onPress={() => { openDetail() }} text={esp.lang("market/merchant_sending_method_find_driver", "show_detail")} />
              </>
            }
            {
              data?.code == 3 && //driver tidak ditemukan
              <>
                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 18, textAlign: 'center' }} >{data?.info}</Text>
                <View style={{ marginTop: 20 }} >
                  <MarketButton buttonStyle={{ marginBottom: 10 }} textStyle={{ fontSize: 14 }} iconSize={24} icon={'cog'} onPress={() => { setShippingMethod() }} text={esp.lang("market/merchant_sending_method_find_driver", "reset_shipping")} />
                  <MarketButton
                    buttonStyle={{ marginBottom: 10 }}
                    colorBackground={"white"}
                    colorBorder={MarketStyle.colorPrimaryMarket}
                    color={MarketStyle.colorPrimaryMarket}
                    textStyle={{ fontSize: 14 }} iconSize={24} icon={'arrow-left'} onPress={() => { LibNavigation.back() }} text={esp.lang("market/merchant_sending_method_find_driver", "btn_back")} />
                </View>
              </>

            }
          </View>
      }
    </View>
  )
}