// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/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 } from 'react';
import { Text, View } from 'react-native';
import CalendarPicker from 'react-native-calendar-picker';


export interface MarketAds_calendarArgs {

}
export interface MarketAds_calendarProps {

}
export default function m(props: MarketAds_calendarProps): any {
  const date_start = LibUtils.getArgs(props, "date_start")
  const date_end = LibUtils.getArgs(props, "date_end")
  const [selectedStartDate, setSelectedStartDate] = useSafeState<any>()
  const [selectedEndDate, setSelectedEndDate] = useSafeState<any>()

  const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds

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

  function onDateChange(date: any, type: any) {
    if (type === 'END_DATE') {
      setSelectedEndDate(date)
    } else {
      setSelectedStartDate(date)
      setSelectedEndDate(null)
    }
  }

  function customDayHeaders(dayOfWeek: any): any {
    switch (dayOfWeek) { // can also evaluate month, year
      case 4: // Thursday
        return {
          style: {
            borderRadius: 12,
            backgroundColor: 'cyan',
          },
          textStyle: {
            color: 'blue',
            fontSize: 22,
            fontWeight: 'bold',
          }
        };
    }
  }


  const customDatesStyles = (date: any) => {
    switch (date.isoWeekday()) {
      case 7: // Sunday
        return {
          textStyle: {
            color: 'red',
          }
        };
    }
  }


  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <MarketHeader title={esp.lang("market/ads_calendar", "header_title")} onlyBack />
      <CalendarPicker
        allowRangeSelection={true}
        weekdays={[esp.lang("market/ads_calendar", "day_1"), esp.lang("market/ads_calendar", "day_2"), esp.lang("market/ads_calendar", "day_3"), esp.lang("market/ads_calendar", "day_4"), esp.lang("market/ads_calendar", "day_5"), esp.lang("market/ads_calendar", "day_6"), esp.lang("market/ads_calendar", "day_7")]}
        months={[esp.lang("market/ads_calendar", "month_1"), esp.lang("market/ads_calendar", "month_2"), esp.lang("market/ads_calendar", "month_3"), esp.lang("market/ads_calendar", "month_4"), esp.lang("market/ads_calendar", "month_5"), esp.lang("market/ads_calendar", "month_6"), esp.lang("market/ads_calendar", "month_7"), esp.lang("market/ads_calendar", "month_8"), esp.lang("market/ads_calendar", "month_9"), esp.lang("market/ads_calendar", "month_10"), esp.lang("market/ads_calendar", "month_11"), esp.lang("market/ads_calendar", "month_12")]}
        previousComponent={
          <LibIcon name={"chevron-left"} />
        }
        nextComponent={
          <LibIcon name={"chevron-right"} />
        }
        customDatesStyles={customDatesStyles}
        customDayHeaderStyles={(days: any) => customDayHeaders(days)}
        selectedDayColor={MarketStyle.colorPrimaryMarket}
        selectedDayTextColor="#fff"
        onDateChange={onDateChange}
        selectedStartDate={date_start}
        selectedEndDate={date_end}
        minDate={moment().add(-1, 'years')}
      // minDate={new Date()}
      />
      <View style={styleId_ZbJulh} />
      <View style={styleId_13za2M}>
        {
          selectedStartDate == undefined &&
          <Text allowFontScaling={false} style={styleId_2gvJ7o}>{esp.lang("market/ads_calendar", "select_date_start")}</Text>
        }
        {
          selectedStartDate !== undefined && selectedEndDate == undefined &&
          <Text allowFontScaling={false} style={styleId_26zrV0}>{esp.lang("market/ads_calendar", "select_date_end")}</Text>
        }
      </View>
      {
        selectedStartDate !== undefined && selectedEndDate !== null &&
        <>
          <View style={styleId_Z2dSPDK}>
            <Text allowFontScaling={false} style={styleId_Z1K9gP8}>{moment(selectedStartDate).localeFormat("DD MMM YYYY") + " - " + moment(selectedEndDate).localeFormat("DD MMM YYYY")}</Text>
          </View>
          <View style={styleId_Z3tje8}>
            <MarketButton onPress={() => {
              LibNavigation.sendBackResult({
                date_start: moment(selectedStartDate).localeFormat("YYYY-MM-DD"),
                date_end: moment(selectedEndDate).localeFormat("YYYY-MM-DD"),
              }, LibNavigation.getResultKey(props))
            }} text={esp.lang("market/ads_calendar", "save")} colorBackground='#fff' colorBorder='#51b596' textStyle={{ color: '#51b596' }} buttonStyle={{ borderRadius: 20 }} />
          </View>
        </>
      }
    </View>
  )
}
const styleId_ZbJulh: any = { margin: 15, height: 1, backgroundColor: '#e3e3e3' }
const styleId_13za2M: any = { flexDirection: 'row', justifyContent: 'space-between', marginLeft: 15, marginRight: 15 }
const styleId_2gvJ7o: any = { fontFamily: "SFProText", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }
const styleId_26zrV0: any = { fontFamily: "SFProText", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: MarketStyle.colorPrimaryMarket }
const styleId_Z2dSPDK: any = { flexDirection: 'row', margin: 15, marginTop: 0, justifyContent: 'space-between' }
const styleId_Z1K9gP8: any = { fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: MarketStyle.colorPrimaryMarket }
const styleId_Z3tje8: any = { margin: 15, marginTop: 0 }