// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
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 { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketAds_chart } from 'esoftplay/cache/market/ads_chart/import';
import { MarketAds_deposit_payment_methodArgs } from 'esoftplay/cache/market/ads_deposit_payment_method/import';
import { MarketAds_faq } from 'esoftplay/cache/market/ads_faq/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 esp from 'esoftplay/esp';


import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
import useSafeState from 'esoftplay/state';
import React, { useEffect, useRef } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface MarketAds_homeArgs {

}
export interface MarketAds_homeProps {

}


const _state = useGlobalState({}, { persistKey: 'advert_config', loadOnInit: true })

export function state(): useGlobalReturn<any> {
  return _state
}

export function update(): void {
  new LibCurl("advert/main", null,
    (res, msg) => {
      _state.set(res.config)
    }, (msg) => { })
}

export function createNewAds() {
  MarketSlidingupProperty.add(
    <View style={styleId_Z1nIsH4} >
      <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_home", "create_ads_title")}</Text>
      </View>
      <TouchableOpacity onPress={() => {
        LibNavigation.navigate('market/ads_product_group')
        MarketSlidingupProperty.hide()
      }} style={styleId_Z1yRHi7} >
        <LibPicture source={esp.assets('market/041-review.png')} style={styleId_ZIHLOx} />
        <Text allowFontScaling={false} style={styleId_URciw} >{esp.lang("market/ads_home", "ads_product")}</Text>
        <Text allowFontScaling={false} style={styleId_Z225Pd9} >{esp.lang("market/ads_home", "ads_product_msg")}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => {
        LibNavigation.navigate('market/ads_store_name')
        MarketSlidingupProperty.hide()
      }} style={styleId_Z1yRHi7} >
        <LibPicture source={esp.assets('market/034-store.png')} style={styleId_ZIHLOx} />
        <Text allowFontScaling={false} style={styleId_URciw} >{esp.lang("market/ads_home", "ads_merchant")}</Text>
        <Text allowFontScaling={false} style={styleId_Z225Pd9} >{esp.lang("market/ads_home", "ads_merchant_msg")}</Text>
      </TouchableOpacity>
    </View>
  )
  MarketSlidingupProperty.show()
}

export default function m(props: MarketAds_homeProps): any {
  const user = UserClass.state().useSelector(s => s)
  const [selectNominal, setSelectNominal] = useSafeState<any>()
  const slidingNominal = useRef<LibSlidingup>(null)

  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,
    }
  ]

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

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

  return (
    <View>
      <ScrollView>
        <View style={styleId_1zsodf} >
          <TouchableOpacity onPress={() => { LibNavigation.navigate('market/ads_deposit') }} 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_home", "saldo_ads")}</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_home", "history")}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {
            slidingNominal.current!.show()
          }} 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_home", "deposit")}</Text>
          </TouchableOpacity>
        </View>

        <View style={styleId_13OsfE} >
          <MarketAds_chart advert_type={0} />
        </View>

        <View style={styleId_13OsfE} >
          <MarketAds_faq />
        </View>

        <MarketButton
          onPress={() => {
            createNewAds()
          }}
          text={esp.lang("market/ads_home", "create_new")}
          buttonStyle={styleId_YdHqR} />

      </ScrollView>
      <LibSlidingup ref={slidingNominal} >
        <View style={styleId_22MUga} >
          <View style={styleId_12lRXe} >
            <TouchableOpacity onPress={() => slidingNominal.current!.hide()} style={styleId_1hcIwd} >
              <LibIcon name="close" size={20} />
            </TouchableOpacity>
            <Text allowFontScaling={false} style={styleId_Z26yQmp}  >{esp.lang("market/ads_home", "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 })
              slidingNominal.current!.hide()
            }}
            text={esp.lang("market/ads_home", "btn_next")}
            buttonStyle={styleId_ZBEBtQ}
          />
        </View>
      </LibSlidingup>
    </View>
  )
}
const styleId_Z1nIsH4: any = { 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_Z1yRHi7: any = { margin: 15, padding: 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_ZIHLOx: any = { height: 60, width: 60 }
const styleId_URciw: any = { marginTop: 5, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }
const styleId_Z225Pd9: any = { marginTop: 10, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#c5c5c5', textAlign: 'center' }
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) }
const styleId_13OsfE: any = { margin: 15, padding: 10, justifyContent: 'space-between', borderRadius: 5, backgroundColor: "#fff", ...LibStyle.elevation(2) }
const styleId_YdHqR: any = { margin: 15, marginBottom: 20, marginTop: 10 }
const styleId_22MUga: any = { maxHeight: LibStyle.height / 2, backgroundColor: "white", paddingVertical: 15, paddingHorizontal: 17, borderTopRightRadius: 15, borderTopLeftRadius: 15 }
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 }