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


import { LibIcon } from 'esoftplay/cache/lib/icon/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 { MarketAds_deposit_payment_methodArgs } from 'esoftplay/cache/market/ads_deposit_payment_method/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketRefresh_button } from 'esoftplay/cache/market/refresh_button/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { MarketUser_profileProperty } from 'esoftplay/cache/market/user_profile/import';
import { UserClass } from 'esoftplay/cache/user/class/import';


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


export interface MarketAds_deposit_saldoArgs {

}
export interface MarketAds_deposit_saldoProps {

}
export default function m(props: MarketAds_deposit_saldoProps): any {
  const user = UserClass.state().useSelector(s => s)
  const [selectNominal, setSelectNominal] = useSafeState<any>()

  let nominal = [
    {
      id: 1,
      nominal: 50000,
    },
    {
      id: 2,
      nominal: 100000,
    },
    {
      id: 3,
      nominal: 200000,
    },
    {
      id: 4,
      nominal: 300000,
    },
    {
      id: 5,
      nominal: 500000,
    },
    {
      id: 6,
      nominal: 1000000,
    },
    {
      id: 7,
      nominal: 5000000,
    },
    {
      id: 8,
      nominal: 10000000,
    }
  ]

  useEffect(() => {


    MarketSlidingupProperty.add(
      <View style={styleId_22MUga} >
        <View style={styleId_12lRXe} >
          <TouchableOpacity onPress={() => MarketSlidingupProperty.hide()} style={styleId_1hcIwd} >
            <LibIcon name="close" size={20} />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_Z26yQmp}  >{esp.lang("market/ads_deposit_saldo", "title_add_deposit")}</Text>
        </View>
        <ScrollView>
          {
            nominal?.map((item: any, i: number) => {
              return (
                <TouchableOpacity onPress={() => {
                  setSelectNominal(item)
                }} key={i} style={styleId_26qOKw}>
                  <Text allowFontScaling={false} style={styleId_Z2wqfy9} >{LibUtils.money(item.nominal)}</Text>
                  <TouchableOpacity onPress={() => {
                    setSelectNominal(item)
                  }}>
                    <LibIcon color={MarketStyle.colorPrimaryMarket} name={selectNominal?.id == item.id ? "radiobox-marked" : "radiobox-blank"} />
                  </TouchableOpacity>
                </TouchableOpacity>
              )
            })
          }
        </ScrollView>
        <MarketButton
          onPress={() => {
            LibNavigation.navigate<MarketAds_deposit_payment_methodArgs>('market/ads_deposit_payment_method', { price: selectNominal.nominal })
            MarketSlidingupProperty.hide()
          }}
          text={esp.lang("market/ads_deposit_saldo", "btn_next")}
          buttonStyle={styleId_ZBEBtQ}
        />
      </View>
    )
  })

  const itemWidth = (LibStyle.width - 70) / 4

  return (
    <View style={styleId_1zsodf} >
      <TouchableOpacity onPress={() => { LibNavigation.navigate('market/ads_saldo_history') }} style={styleId_NOaP} >
        <LibPicture source={esp.assets('market/ic_market_merchant_balance.png')} style={styleId_Z1FAOiR} resizeMode="contain" />
        <View style={styleId_14tcJb} >
          <Text allowFontScaling={false} style={styleId_Z1iiscK} >{esp.lang("market/ads_deposit_saldo", "saldo_deposit")}</Text>
          <View style={styleId_1fmvBo} >
            <Text allowFontScaling={false} style={styleId_Z25Cf8Q} >{LibUtils.money(user?.saldo_ads)}</Text>
            <MarketRefresh_button onPress={() => { MarketUser_profileProperty.update() }} />
          </View>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => { LibNavigation.navigate('market/ads_deposit_history') }} activeOpacity={1} style={[styleId_Z8S6St, { width: itemWidth }]} >
        <LibIcon name="history" size={30} color={MarketStyle.colorPrimaryMarket} />
        <Text allowFontScaling={false} style={styleId_2pNbjs} >{esp.lang("market/ads_deposit_saldo", "history")}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => {
        MarketSlidingupProperty.show()
        // LibNavigation.navigate('market/ads_deposit_detail', { url: 'advert/deposit_detail?id=1' })
      }} activeOpacity={1} style={[styleId_Z212MAF, { width: itemWidth }]} >
        <LibIcon name="plus-box" size={30} color={MarketStyle.colorPrimaryMarket} />
        <Text allowFontScaling={false} style={styleId_2pNbjs} >{esp.lang("market/ads_deposit_saldo", "deposit")}</Text>
      </TouchableOpacity>
    </View>
  )
}
const styleId_22MUga: any = { maxHeight: LibStyle.height / 2, backgroundColor: "white", paddingVertical: 15, paddingHorizontal: 17, borderTopRightRadius: 15, borderTopLeftRadius: 15 }
const styleId_12lRXe: any = { flexDirection: "row", alignItems: "center", marginBottom: 10 }
const styleId_1hcIwd: any = { marginRight: 10 }
const styleId_Z26yQmp: any = { fontWeight: 'bold', fontSize: 16 }
const styleId_26qOKw: any = { padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', flexDirection: 'row', justifyContent: 'space-between' }
const styleId_Z2wqfy9: any = { fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#707070" }
const styleId_ZBEBtQ: any = { marginVertical: 10 }
const styleId_1zsodf: any = { flexDirection: "row", marginHorizontal: 15, marginTop: 10 }
const styleId_NOaP: any = { flex: 1, marginRight: 10, flexDirection: 'row', alignItems: "center", padding: 10, borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_Z1FAOiR: any = { width: 35, height: 35 }
const styleId_14tcJb: any = { marginLeft: 10, flex: 1 }
const styleId_Z1iiscK: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0 }
const styleId_1fmvBo: any = { flexDirection: 'row', alignItems: 'center' }
const styleId_Z25Cf8Q: any = { flex: 1, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#707070" }
const styleId_Z8S6St: any = { paddingVertical: 10, alignItems: "center", marginRight: 10, borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_2pNbjs: any = { paddingVertical: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center" }
const styleId_Z212MAF: any = { paddingVertical: 10, alignItems: "center", borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }