// withHooks

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 { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { LibWebview } from 'esoftplay/cache/lib/webview/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';

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


export interface MarketCheckout_voucher_detailArgs {

}
export interface MarketCheckout_voucher_detailProps {

}
export default function m(props: MarketCheckout_voucher_detailProps): any {
  const { url } = LibNavigation.getArgsAll<any>(props)
  const [result, setResult] = useSafeState<any>()


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

  function loadData() {
    new LibCurl(url, null, (res, msg) => {
      setResult(res)
    }, (error) => {
      LibDialog.warning(esp.lang("market/checkout_voucher_detail", "load_data_failed"), error?.message)
      LibNavigation.back()
    }, 1)
  }

  if (!result) {
    return <LibLoading />
  }

  let date = moment(result?.expired_date).localeFormat("YYYY-MM-DD") == moment().localeFormat("YYYY-MM-DD")


  return (
    <View style={styleId_qpkod}>
      <MarketHeader onlyBack title={esp.lang("market/checkout_voucher_detail", "header_title")} />
      <ScrollView>
        {
          result?.image != "" &&
          <LibPicture source={{ uri: result?.image }} style={styleId_Z2j9qOz} resizeMode={'cover'} />
        }
        <Text allowFontScaling={false} style={styleId_ZklIN4}>{result?.title} s.d. {LibUtils.money(result?.amount_max)}</Text>
        <View style={styleId_Z1DtKjL}>
          <View style={styleId_Z4zoDX} >
            <LibIcon name="clock-outline" color={MarketStyle.colorPrimaryMarket} />
            <Text allowFontScaling={false} style={styleId_Z2botE9}>Berlaku hingga</Text>
          </View>
          {
            date ?
              <MarketCountdown expired={moment(result?.expired_date).localeFormat('YYYY-MM-DD HH:mm:ss')}
                style={styleId_Z2oSVPd}
                containerStyle={styleId_Z1ECMLP} />
              :
              <Text allowFontScaling={false} style={styleId_bK2gM}>{moment(result?.expired_date).localeFormat("DD MMM YYYY")}</Text>
          }
        </View>
        <View style={styleId_Z1DtKjL}>
          <View style={styleId_Z4zoDX} >
            <LibIcon.MaterialIcons name="attach-money" color={MarketStyle.colorPrimaryMarket} />
            <Text allowFontScaling={false} style={styleId_Z2botE9}>{esp.lang("market/checkout_voucher_detail", "transaction_minimal")}</Text>
          </View>
          <Text allowFontScaling={false} style={styleId_21Di7q}>{LibUtils.money(result?.order_min)}</Text>
        </View>

        <View style={styleId_K4e47} />
        {
          result?.term != "" &&
          <>
            <Text allowFontScaling={false} style={styleId_lGE4R}>{esp.lang("market/checkout_voucher_detail", "term")}</Text>
            <LibWebview source={{ html: result?.term }} onFinishLoad={() => { }} />
          </>
        }

      </ScrollView>
    </View>
  )
}
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_Z2j9qOz: any = { width: LibStyle.width, height: LibStyle.width / 3 }
const styleId_ZklIN4: any = { margin: 15, marginBottom: 0, fontSize: 16, fontWeight: 'bold' }
const styleId_Z1DtKjL: any = { marginHorizontal: 15, marginTop: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
const styleId_Z4zoDX: any = { flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
const styleId_Z2botE9: any = { marginLeft: 10, fontSize: 12, color: '#c5c5c5' }
const styleId_Z2oSVPd: any = { color: MarketStyle.colorBrown, fontSize: 12, fontWeight: 'bold', flex: 1 }
const styleId_Z1ECMLP: any = { backgroundColor: LibUtils.hexToRgba(MarketStyle.colorPrimaryMarket, 0.2), paddingHorizontal: 8, borderRadius: 5 }
const styleId_bK2gM: any = { flex: 1, textAlign: 'right', fontSize: 14, fontWeight: 'bold', color: MarketStyle.colorBrown }
const styleId_21Di7q: any = { flex: 1, textAlign: 'right', fontSize: 12, fontWeight: 'bold' }
const styleId_K4e47: any = { height: 4, backgroundColor: '#f5f5f5', marginVertical: 10 }
const styleId_lGE4R: any = { margin: 15, marginTop: 0, fontSize: 16, fontWeight: 'bold' }