// withHooks

import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_select } from 'esoftplay/cache/market/input_select/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';

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


export interface MarketAds_costArgs {

}
export interface MarketAds_costProps {

}
export default function m(props: MarketAds_costProps): any {
  const inputDailyCost = useRef<MarketInput_square>(null)
  const inputTotalCost = useRef<MarketInput_square>(null)

  const [showDailyCost, setShowDailyCost] = useSafeState<number>(1)
  const [showTotalCost, setShowTotalCost] = useSafeState<number>(0)

  const [showPeriodNoLimit, setShowPeriodNoLimit] = useSafeState<number>(1)
  const [showPeriod, setShowPeriod] = useSafeState<number>(0)

  let date = useRef(moment().localeFormat("YYYY-MM-DD")).current
  // let whatDate = useRef('start').current
  const [dateStart, setDateStart] = useSafeState<any>("")
  const [dateEnd, setDateEnd] = useSafeState<any>("")

  function showDatePicker(whatDate: "start" | "end") {
    MarketSlidingupProperty.add(
      <View style={styleId_Z25UOiL} >
        <LibTextstyle textStyle="headline" text={esp.lang("market/ads_cost", "select_date")} style={styleId_Z1atydL} />
        <MarketSection_menu size="line" />
        <View style={styleId_1HCH4d}>
          <LibDatepicker
            minDate={date}
            maxDate={moment().add(10, 'years').localeFormat('YYYY-MM-DD')}
            onDateChange={(dt: any) => {
              if (whatDate == 'start') {
                date = dt
                MarketSlidingupProperty.hide()
                setDateStart(moment(dt).localeFormat("DD-MM-YYYY"))
              } else {
                setDateEnd(moment(dt).localeFormat("DD-MM-YYYY"))
                MarketSlidingupProperty.hide()
              }
            }}
            selectedDate={date}
          />
        </View>
      </View>
    )
    MarketSlidingupProperty.show()
  }

  return (
    <View style={styleId_qpkod}>
      <MarketHeader title={esp.lang("market/ads_cost", "header_title")} onlyBack rightView={() => (
        <View style={styleId_2nLyCQ}>
          <TouchableOpacity onPress={() => {

          }}>
            <LibIcon name="help-circle" color={"#c5c5c5"} />
          </TouchableOpacity>
        </View>
      )} />
      <ScrollView>
        <LibKeyboard_avoid>
          <Text allowFontScaling={false} style={styleId_Z1riKM5} >{esp.lang("market/ads_cost", "setting_cost")}</Text>
          <View style={styleId_dt7dA}>
            <TouchableOpacity onPress={() => {
              setShowDailyCost(1)
              setShowTotalCost(0)
            }} style={styleId_Z1IS0fI}>
              <LibIcon color={MarketStyle.colorPrimaryMarket} size={20} name={showDailyCost == 1 ? "radiobox-marked" : "radiobox-blank"} />
              <Text allowFontScaling={false} style={styleId_2tBe6S} >{esp.lang("market/ads_cost", "daily_cost")}</Text>
            </TouchableOpacity>
            {
              showDailyCost == 1 &&
              <MarketInput_square
                ref={inputDailyCost}
                prefix={esp.lang("market/ads_cost", "daily_prefix")}
                onChangeText={(t) => { }}
                containerStyle={styleId_Zktt4p}
                style={styleId_Zkxxg6}
                placeholder={esp.lang("market/ads_cost", "daily_placeholder")}
              />
            }
          </View>
          <View style={styleId_Z3tje8}>
            <TouchableOpacity onPress={() => {
              setShowDailyCost(0)
              setShowTotalCost(1)
            }} style={{ flexDirection: 'row' }}>
              <LibIcon color={MarketStyle.colorPrimaryMarket} size={20} name={showTotalCost == 1 ? "radiobox-marked" : "radiobox-blank"} />
              <Text allowFontScaling={false} style={styleId_2tBe6S} >{esp.lang("market/ads_cost", "total_cost")}</Text>
            </TouchableOpacity>
            {
              showTotalCost == 1 &&
              <MarketInput_square
                ref={inputTotalCost}
                prefix={esp.lang("market/ads_cost", "total_cost_prefix")}
                onChangeText={(t) => { }}
                containerStyle={styleId_Zktt4p}
                style={styleId_Zkxxg6}
                placeholder={esp.lang("market/ads_cost", "total_cost_placeholder")}
              />
            }
          </View>

          <Text allowFontScaling={false} style={styleId_Z1riKM5} >Periode</Text>
          <TouchableOpacity onPress={() => {
            setShowPeriodNoLimit(1)
            setShowPeriod(0)
          }} style={styleId_P4zii}>
            <LibIcon color={MarketStyle.colorPrimaryMarket} size={20} name={showPeriodNoLimit == 1 ? "radiobox-marked" : "radiobox-blank"} />
            <Text allowFontScaling={false} style={styleId_2tBe6S} >{esp.lang("market/ads_cost", "unlimited")}</Text>
          </TouchableOpacity>

          <View style={styleId_Z3tje8}>
            <TouchableOpacity onPress={() => {
              setShowPeriod(1)
              setShowPeriodNoLimit(0)
            }} style={{ flexDirection: 'row' }}>
              <LibIcon color={MarketStyle.colorPrimaryMarket} size={20} name={showPeriod == 1 ? "radiobox-marked" : "radiobox-blank"} />
              <Text allowFontScaling={false} style={styleId_2tBe6S} >{esp.lang("market/ads_cost", "setting_date_start_end")}</Text>
            </TouchableOpacity>
            {
              showPeriod == 1 &&
              <>
                <MarketInput_select
                  onPress={() => {
                    showDatePicker("start")
                  }}
                  value={dateStart}
                  placeholder={esp.lang("market/ads_cost", "date_start_placeholder")}
                  label={esp.lang("market/ads_cost", "date_start_label")}
                  containerStyle={styleId_Zktt4p}
                />

                <MarketInput_select
                  onPress={() => {
                    showDatePicker("end")
                  }}
                  placeholder={esp.lang("market/ads_cost", "date_end_placeholder")}
                  value={dateEnd}
                  label={esp.lang("market/ads_cost", "date_end_label")}
                  containerStyle={styleId_Zktt4p}
                />
              </>
            }

          </View>

        </LibKeyboard_avoid>
      </ScrollView>
      <MarketButton
        onPress={() => { LibNavigation.navigate('market/ads_summary') }}
        text={esp.lang("market/ads_cost", "btn_next")}
        buttonStyle={styleId_dt7dA}
      />
    </View>
  )
}
const styleId_Z25UOiL: any = { backgroundColor: "white", paddingVertical: 10 }
const styleId_Z1atydL: any = { textAlign: 'center', paddingBottom: 10 }
const styleId_1HCH4d: any = { height: LibStyle.height * 0.33 }
const styleId_qpkod: any = { flex: 1, backgroundColor: '#fff' }
const styleId_2nLyCQ: any = { flexDirection: 'row', marginRight: 20 }
const styleId_Z1riKM5: any = { marginLeft: 15, marginTop: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_dt7dA: any = { margin: 15 }
const styleId_Z1IS0fI: any = { flexDirection: 'row' }
const styleId_2tBe6S: any = { marginBottom: 10, marginLeft: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_Zktt4p: any = { marginLeft: 20 }
const styleId_Zkxxg6: any = { marginLeft: 10 }
const styleId_Z3tje8: any = { margin: 15, marginTop: 0 }
const styleId_P4zii: any = { margin: 15, flexDirection: 'row' }