// withHooks

import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 { 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, { useEffect, useRef } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface MarketAds_periode_optionArgs {
  startDate: string,
  endDate: string
}
export interface MarketAds_periode_optionProps {

}
export default function m(props: MarketAds_periode_optionProps): any {
  const { startDate, endDate } = LibNavigation.getArgsAll<any>(props)

  const [showPeriodNoLimit, setShowPeriodNoLimit] = useSafeState<number>(startDate != '0000-00-00' ? 0 : 1)
  const [showPeriod, setShowPeriod] = useSafeState<number>(startDate != '0000-00-00' ? 1 : 0)

  let date = useRef(moment().localeFormat("YYYY-MM-DD")).current
  // let whatDate = useRef('start').current

  const [dateStart, setDateStart] = useSafeState<any>(startDate != '0000-00-00' ? startDate : '')
  const [dateEnd, setDateEnd] = useSafeState<any>(endDate != '0000-00-00' ? endDate : '')

  function showDatePicker(whatDate: "start" | "end") {
    MarketSlidingupProperty.add(
      <View style={styleId_Z25UOiL} >
        <LibTextstyle textStyle="headline" text={esp.lang("market/ads_periode_option", "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("YYYY-MM-DD"))
              } else {
                setDateEnd(moment(dt).localeFormat("YYYY-MM-DD"))
                MarketSlidingupProperty.hide()
              }
            }}
            selectedDate={date}
          />
        </View>
      </View>
    )
    MarketSlidingupProperty.show()
  }

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

  let valid = showPeriod == 1 ? ((dateStart != "" && dateEnd != "") ? true : false) : true

  return (
    <View style={styleId_ZcMJmd} >
      <MarketHeader onlyBack title={esp.lang("market/ads_periode_option", "header_title")} />

      <ScrollView>
        <TouchableOpacity onPress={() => {
          setShowPeriodNoLimit(1)
          setShowPeriod(0)
          setDateStart('')
          setDateEnd('')
        }} 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_periode_option", "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_periode_option", "date_start_end")}</Text>
          </TouchableOpacity>
          {
            showPeriod == 1 &&
            <>
              <MarketInput_select
                onPress={() => {
                  showDatePicker("start")
                }}
                value={dateStart}
                placeholder={esp.lang("market/ads_periode_option", "date_start_placeholder")}
                label={esp.lang("market/ads_periode_option", "date_start_label")}
                containerStyle={styleId_Zktt4p}
              />

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

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


    </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_ZcMJmd: any = { flex: 1 }
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_Zktt4p: any = { marginLeft: 20 }
const styleId_dt7dA: any = { margin: 15 }