// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/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 { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { UseCurl } from 'esoftplay/cache/use/curl/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import { useTimeout } from 'esoftplay/timeout';

import LottieView from "lottie-react-native";
import React, { useEffect, useRef } from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketSaldo_detailProps {

}
export default function m(props: MarketSaldo_detailProps): any {
  const url = LibUtils.getArgs(props, 'url')
  const title = LibUtils.getArgs(props, 'title')

  const successRef = useRef<LottieView>(null)
  const [result, setResult] = useSafeState<any>()
  const [curl, loading, error] = UseCurl(true)
  const timeout = useTimeout()

  useEffect(() => {
    curl(url, null, (res, msg) => {
      setResult(res)
      esp.log(res);
      timeout(() => {
        successRef.current?.play()
      }, 400);
    })
  }, [])

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        title={title || esp.lang("market/saldo_detail", "header_title")}
        onlyBack />
      {
        loading || !result ? <LibLoading /> :
          error != '' ? <MarketEmpty msg={error} />
            :
            <LibScroll>
              <View style={{ alignItems: 'center', marginVertical: 30 }} >
                <LottieView
                  ref={successRef}
                  loop={false}
                  style={{ width: 100, height: 100, }}
                  source={esp.assets('market/success.json')}
                />
              </View>
              <LibTextstyle
                textStyle="headline"
                text={result?.title || title}
                style={{ textAlign: "center", marginHorizontal: 17 }} />
              <LibTextstyle textStyle="caption1"
                style={{ marginVertical: 10, color: "#888", textAlign: "center" }}
                text={moment(result.ondate).localeFormat('dddd, DD MMMM YYYY HH:mm')} />
              <LibTextstyle
                textStyle={"title1"}
                style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 40 }}
                text={LibUtils.money(result.amount)}
              />
              <MarketSection_menu size="line" />
              <MarketSection_menu title={esp.lang("market/saldo_detail", "from")} smooth />
              {/* <MarketInput_label label="Dari" /> */}
              <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 10, paddingHorizontal: 17 }} >
                <LibPicture style={{ height: 40, width: 40, borderRadius: 20, backgroundColor: '#f1f2f3', marginRight: 20 }} source={result.send_image == "" ? esp.assets('market/ic_no_image_merchant.png') : { uri: result.send_image }} />
                <View style={{ flex: 1 }} >
                  <LibTextstyle text={result.send_name} textStyle={'body'} />
                  {
                    LibUtils.checkUndefined(result, 'send_account') &&
                    <LibTextstyle text={result.send_account} textStyle={'footnote'} style={{ color: "#888" }} />
                  }
                </View>
              </View>
              <MarketSection_menu title={esp.lang("market/saldo_detail", "to")} smooth />
              <View style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 10, paddingHorizontal: 17 }} >
                <LibPicture style={{ height: 40, width: 40, borderRadius: 20, backgroundColor: '#f1f2f3', marginRight: 20 }} source={result.receive_image == "" ? esp.assets('market/ic_no_image_merchant.png') : { uri: result.receive_image }} />
                <View style={{ flex: 1 }} >
                  <LibTextstyle text={result.receive_name} textStyle={'body'} />
                  {
                    LibUtils.checkUndefined(result, 'receive_account') &&
                    <LibTextstyle text={result.receive_account} textStyle={'footnote'} style={{ color: "#888" }} />
                  }
                </View>
              </View>
              <MarketSection_menu size="line" />
              {
                result.notes != '' &&
                <>
                  <MarketSection_menu title={esp.lang("market/saldo_detail", "notes")} smooth />
                  <View style={{ marginHorizontal: 17, marginBottom: 10, flexDirection: 'row', alignItems: 'center' }} >
                    <LibTextstyle text={result.notes} textStyle={'body'} style={{ flex: 1 }} />
                  </View>
                  <MarketSection_menu size="line" />
                </>
              }
              <MarketSection_menu title={esp.lang("market/saldo_detail", "transaction_number")} smooth />
              <View style={{ marginHorizontal: 17, marginVertical: 10, flexDirection: 'row', alignItems: 'center' }} >
                <LibTextstyle text={result.code} textStyle={'body'} style={{ flex: 1 }} />
                <TouchableOpacity onPress={() => {
                  LibUtils.copyToClipboard(result.code).then(() => LibToastProperty.show(esp.lang("market/saldo_detail", "transaction_copied")))
                }} >
                  <LibIcon.AntDesign name="copy1" />
                </TouchableOpacity>
              </View>
            </LibScroll>
      }
    </View >
  )
}