// withHooks
// noPage

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 { 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 from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')


export interface MarketAds_date_selectionArgs {

}
export interface MarketAds_date_selectionProps {
  date_range: (date_start: string, date_end: string) => void
}
export default function m(props: MarketAds_date_selectionProps): any {
  var date = new Date()
  date.setDate(1);

  let periodePerform = [
    {
      id: 1,
      title: esp.lang("market/ads_date_selection", "today"),
      date: moment().localeFormat('DD MMM YYYY'),
      date_start: moment().localeFormat('YYYY-MM-DD'),
      date_end: moment().localeFormat('YYYY-MM-DD'),
    },
    {
      id: 2,
      title: esp.lang("market/ads_date_selection", "yesterday"),
      date: moment().subtract(1, "days").localeFormat("DD MMM YYYY"),
      date_start: moment().subtract(1, "days").localeFormat('YYYY-MM-DD'),
      date_end: moment().subtract(1, "days").localeFormat('YYYY-MM-DD'),
    },
    {
      id: 3,
      title: esp.lang("market/ads_date_selection", "7days"),
      date: moment().add(-6, 'days').localeFormat('DD MMM YYYY') + '-' + moment().localeFormat('DD MMM YYYY'),
      date_start: moment().add(-6, 'days').localeFormat('YYYY-MM-DD'),
      date_end: moment().localeFormat('YYYY-MM-DD'),
    },
    {
      id: 4,
      title: esp.lang("market/ads_date_selection", "30day"),
      date: moment().add(-29, 'days').localeFormat('DD MMM YYYY') + '-' + moment().localeFormat('DD MMM YYYY'),
      date_start: moment().add(-29, 'days').localeFormat('YYYY-MM-DD'),
      date_end: moment().localeFormat('YYYY-MM-DD'),
    },
    {
      id: 5,
      title: esp.lang("market/ads_date_selection", "this_month"),
      date: moment(date).localeFormat('DD MMM YYYY') + '-' + moment().localeFormat('DD MMM YYYY'),
      date_start: moment(date).localeFormat('YYYY-MM-DD'),
      date_end: moment().localeFormat('YYYY-MM-DD'),
    },
    {
      id: 6,
      title: esp.lang("market/ads_date_selection", "custom"),
      date: esp.lang("market/ads_date_selection", "select_date"),
      module: 'market/ads_calendar'
    }
  ]
  const [periodePerformAds, setPeriodePerformAds] = useSafeState<any>(periodePerform[2] || undefined)
  const [dateRange, setDateRange] = useSafeState<any>({ date_start: '', date_end: '' })

  function renderPeriodePerform(item: any, i: number) {
    return (
      <TouchableOpacity onPress={() => {
        if (item.hasOwnProperty("module")) {
          LibNavigation.navigateForResult(item.module, undefined, 1648).then((value) => {
            props.date_range(value.date_start, value.date_end)
            setDateRange({ date_start: value.date_start, date_end: value.date_end })
            setPeriodePerformAds(item)
          })
          MarketSlidingupProperty.hide()
        } else {
          props.date_range(item.date_start, item.date_end)
          setPeriodePerformAds(item)
          MarketSlidingupProperty.hide()
        }
      }} key={i} style={styleId_26qOKw}>
        <View>
          <Text allowFontScaling={false} style={styleId_g3yJj} >{item.title}</Text>
          <Text allowFontScaling={false} style={styleId_1SdHAp} >{item.date}</Text>
        </View>
        <TouchableOpacity onPress={() => {
          if (item.hasOwnProperty("module")) {
            LibNavigation.navigateForResult(item.module, undefined, 1648).then((value) => {
              props.date_range(value.date_start, value.date_end)
              setDateRange({ date_start: value.date_start, date_end: value.date_end })
              setPeriodePerformAds(item)
            })
            MarketSlidingupProperty.hide()
          } else {
            props.date_range(item.date_start, item.date_end)
            setPeriodePerformAds(item)
            MarketSlidingupProperty.hide()
          }
        }}>
          <LibIcon color={MarketStyle.colorPrimaryMarket} name={periodePerformAds?.id == item.id ? "radiobox-marked" : "radiobox-blank"} />
        </TouchableOpacity>
      </TouchableOpacity>
    )
  }

  function openDatePerformAds() {
    MarketSlidingupProperty.add(
      <View style={styleId_Z1dwdTf} >
        <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_date_selection", "ads_perform_periode")}</Text>
        </View>
        <ScrollView>
          {periodePerform?.map(renderPeriodePerform)}
        </ScrollView>
      </View>
    )
  }

  return (
    <TouchableOpacity onPress={() => {
      openDatePerformAds()
      MarketSlidingupProperty.show()
    }} style={styleId_Z2f1Hav}>
      <View style={styleId_1I0sQW}>
        <LibIcon name="calendar" style={styleId_1hcIwd} />
        {
          periodePerformAds.id == 6 ?
            <View>
              <Text allowFontScaling={false} style={styleId_ZzAOAd} >{moment(dateRange.date_start).localeFormat('DD MMM YYYY')} - </Text>
              <Text allowFontScaling={false} style={styleId_ZzAOAd} >{moment(dateRange.date_end).localeFormat('DD MMM YYYY')}</Text>
            </View>
            :
            <Text allowFontScaling={false} style={styleId_Y51OM} >{periodePerformAds?.title}</Text>
        }
      </View>
      <LibIcon name="chevron-down" />
    </TouchableOpacity>
  )
}
const styleId_Z1dwdTf: any = { maxHeight: (LibStyle.height * 0.5) + 100, 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_g3yJj: any = { fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }
const styleId_1SdHAp: any = { marginTop: 5, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#707070" }
const styleId_Z2f1Hav: any = { flex: 1, padding: 10, borderRadius: 8, borderColor: '#f5f5f5', borderWidth: 1, flexDirection: 'row', justifyContent: 'space-between' }
const styleId_1I0sQW: any = { flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
const styleId_ZzAOAd: any = { fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#707070" }
const styleId_Y51OM: any = { fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#707070" }