// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UseCurl } from 'esoftplay/cache/use/curl/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import useGlobalSubscriber, { useGlobalSubscriberReturn } from 'esoftplay/subscribe';
import React, { useEffect } from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketBanksProps {

}
export interface MarketBanksArgs {
  from: string
}

const sub = useGlobalSubscriber()

export function subscribe(): useGlobalSubscriberReturn {
  return sub
}

export default function m(props: MarketBanksProps): any {
  const [data, setData] = useSafeState<any>()
  const [curl, loading, error] = UseCurl()
  const from = LibNavigation.getArgs(props, "from", "market/withdraw")

  const loadData = () => curl('user_bank', null, (res) => setData(res))

  useEffect(() => {
    loadData()
    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
  }, [])

  sub.useSubscribe(() => {
    loadData()
  })

  function renderData(item: any, idx: number) {
    return (
      <TouchableOpacity
        onPress={() => LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props))}
        style={styleId_Zc5HmG} >
        <LibTextstyle textStyle="body" text={String(idx + 1)} style={styleId_1JJVMC} />
        <View style={{ flex: 1 }} >
          <LibTextstyle textStyle="footnote" text={item.bank_owner} />
          <View style={{ flexDirection: 'row' }} >
            <LibTextstyle textStyle="body" text={item.bank_name} style={styleId_1hcIwd} />
            <LibTextstyle textStyle="body" text={"(*" + item.bank_number.substr(item.bank_number.length - 4) + ")"} />
          </View>
        </View>
        <LibIcon.SimpleLineIcons name={"arrow-right"} color={MarketStyle.colorPrimaryMarket} />
      </TouchableOpacity>
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        title={esp.lang("market/banks", "header_title")}
      />
      <LibList
        data={data}
        onRefresh={loadData}
        renderItem={renderData}
        ListEmptyComponent={
          loading ? <LibLoading /> :
            <MarketEmpty msg={error} />
        }
      />
      <TouchableOpacity onPress={() => {
        LibNavigation.setRedirect(() => {
          LibNavigation.back()
        })
        LibNavigation.navigate('user/bank_add', { from: from })
      }} activeOpacity={1} style={{ alignItems: 'center', justifyContent: 'center', width: 55, height: 55, borderRadius: 27.5, backgroundColor: '#f5e71e', position: 'absolute', right: 20, bottom: 20, elevation: 5 }} >
        <LibIcon.Ionicons name={'add'} style={{ color: 'black' }} />
      </TouchableOpacity>

    </View>
  )
}
const styleId_Zc5HmG: any = { flexDirection: "row", paddingHorizontal: 17, paddingVertical: 10, borderBottomColor: "#f4f4f4", borderBottomWidth: 1, alignItems: 'center' }
const styleId_1JJVMC: any = { flex: 0.1 }
const styleId_1hcIwd: any = { marginRight: 10 }