// withHooks

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 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 MarketDate_range_pickerArgs {
  date_start?: any,
  date_end?: any,
  minDate?: any,
  maxDate?: any,
}
export interface MarketDate_range_pickerProps {

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

  const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
  const diffDays = Math.round(Math.abs((selectedStartDate - selectedEndDate) / oneDay));

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

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

  function customDayHeaders(dayOfWeek: 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/date_range_picker", "header")} onlyBack />
      <CalendarPicker
        allowRangeSelection={true}
        weekdays={[
          esp.lang("market/date_range_picker", "days1"),
          esp.lang("market/date_range_picker", "days2"),
          esp.lang("market/date_range_picker", "days3"),
          esp.lang("market/date_range_picker", "days4"),
          esp.lang("market/date_range_picker", "days5"),
          esp.lang("market/date_range_picker", "days6"),
          esp.lang("market/date_range_picker", "days7")
        ]}
        months={[
          esp.lang("market/date_range_picker", "month1"),
          esp.lang("market/date_range_picker", "month2"),
          esp.lang("market/date_range_picker", "month3"),
          esp.lang("market/date_range_picker", "month4"),
          esp.lang("market/date_range_picker", "month5"),
          esp.lang("market/date_range_picker", "month6"),
          esp.lang("market/date_range_picker", "month7"),
          esp.lang("market/date_range_picker", "month8"),
          esp.lang("market/date_range_picker", "month9"),
          esp.lang("market/date_range_picker", "month10"),
          esp.lang("market/date_range_picker", "month11"),
          esp.lang("market/date_range_picker", "month12")
        ]}
        previousComponent={
          <LibIcon name={"chevron-left"} />
        }
        nextComponent={
          <LibIcon name={"chevron-right"} />
        }
        customDatesStyles={customDatesStyles}
        customDayHeaderStyles={(days: any) => customDayHeaders(days)}
        selectedDayColor={'#ed6536'}
        selectedDayTextColor="#fff"
        onDateChange={onDateChange}
        selectedStartDate={date_start}
        selectedEndDate={date_end}
        minDate={minDate ? minDate : new Date()}
        maxDate={maxDate ? maxDate : moment().add(10, 'years').localeFormat("YYYY-MM-DD")}
      />
      <View style={{ margin: 15, height: 1, backgroundColor: '#e3e3e3' }} />
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 15, marginRight: 15 }}>
        {
          selectedStartDate == undefined &&
          <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{esp.lang("market/date_range_picker", "date_start")}</Text>
        }
        {
          selectedStartDate !== undefined && selectedEndDate == undefined &&
          <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{esp.lang("market/date_range_picker", "date_end")}</Text>
        }
      </View>
      {
        selectedStartDate !== undefined && selectedEndDate !== null &&
        <>
          <View style={{ flexDirection: 'row', margin: 15, marginTop: 0, justifyContent: 'space-between' }}>
            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{moment(selectedStartDate).localeFormat("DD MMM YYYY") + " - " + moment(selectedEndDate).localeFormat("DD MMM YYYY")}</Text>
            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }}>{esp.lang("market/date_range_picker", "day", String(diffDays + 1))}</Text>
          </View>
          <View style={{ margin: 15, marginTop: 0 }}>
            <MarketButton onPress={() => {
              LibNavigation.sendBackResult({
                date_start: moment(selectedStartDate).localeFormat("YYYY-MM-DD"),
                date_end: moment(selectedEndDate).localeFormat("YYYY-MM-DD"),
                date: moment(selectedStartDate).localeFormat("DD MMM YYYY") + " - " + moment(selectedEndDate).localeFormat("DD MMM YYYY") + esp.lang("market/date_range_picker", "days", String(Number((diffDays + 1))))
              })
            }} text={esp.lang("market/date_range_picker", "btn_save")} colorBackground='#fff' colorBorder='#51b596' textStyle={{ color: '#51b596' }} buttonStyle={{ borderRadius: 20 }} />
          </View>
        </>
      }
    </View>
  )
}