// 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 { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketAds_cost_optionArgs {
  defValue?: string
}
export interface MarketAds_cost_optionProps {

}
export default function m(props: MarketAds_cost_optionProps): any {
  const { defValue } = LibNavigation.getArgsAll<any>(props)
  const [noLimit, setNoLimit] = useSafeState(defValue == 0 ? true : false)
  const [showInput, setShowInput] = useSafeState(defValue != 0 ? true : false)
  const [inputCost, setInputCost, getInputCost] = useSafeState(defValue != 0 ? defValue : '')

  let valid = !noLimit ? (inputCost == '' ? false : true) : true

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

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader onlyBack title={esp.lang("market/ads_cost_option", "header_title")} />

      <ScrollView>
        <TouchableOpacity onPress={() => {
          setNoLimit(true)
          setShowInput(false)
        }} style={styleId_P4zii}>
          <LibIcon color={MarketStyle.colorPrimaryMarket} size={20} name={noLimit ? "radiobox-marked" : "radiobox-blank"} />
          <Text allowFontScaling={false} style={styleId_2tBe6S} >{esp.lang("market/ads_cost_option", "unlimited")}</Text>
        </TouchableOpacity>

        <View style={styleId_Z3tje8}>
          <TouchableOpacity onPress={() => {
            setNoLimit(false)
            setShowInput(true)
          }} style={styleId_Z1IS0fI}>
            <LibIcon color={MarketStyle.colorPrimaryMarket} size={20} name={!noLimit ? "radiobox-marked" : "radiobox-blank"} />
            <Text allowFontScaling={false} style={styleId_2tBe6S} >{esp.lang("market/ads_cost_option", "saldo_limit")}</Text>
          </TouchableOpacity>
          {
            showInput &&
            <MarketInput_square
              prefix={esp.lang("market/ads_cost_option", "saldo_limit_prefix")}
              maskFrom={'end'}
              mask={'###.###.###.###.###'}
              keyboardType="numeric"
              defaultValue={String(defValue) || ''}
              onChangeText={(t) => { setInputCost(t) }}
              containerStyle={styleId_Zktt4p}
              style={styleId_Zkxxg6}
              placeholder={esp.lang("market/ads_cost_option", "saldo_limit_placeholder")}
            />
          }
        </View>
      </ScrollView>

      <View pointerEvents={valid ? 'auto' : 'none'} >
        <MarketButton
          onPress={() => {
            LibNavigation.sendBackResult(getInputCost(), LibNavigation.getResultKey(props))
          }}
          text={esp.lang("market/ads_cost_option", "btn_save")}
          colorBackground={!valid ? '#aaa' : undefined}
          buttonStyle={styleId_dt7dA}
        />
      </View>


    </View>
  )
}
const styleId_P4zii: any = { margin: 15, flexDirection: 'row' }
const styleId_2tBe6S: any = { marginBottom: 10, marginLeft: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_Z3tje8: any = { margin: 15, marginTop: 0 }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_Zktt4p: any = { marginLeft: 20 }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_dt7dA: any = { margin: 15 }