// 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 esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import moment from 'esoftplay/moment';
import React, { useEffect } from 'react';
import { Text, View } from 'react-native';
import CalendarPicker from 'react-native-calendar-picker';

export interface EventDate_pickerArgs {
  ranged: 'ranged' | 'notrange'
}
export interface EventDate_pickerProps {

}
export default function m(props: EventDate_pickerProps): any {
  const date_start = LibNavigation.getArgs(props, "date_start")
  const date_end = LibNavigation.getArgs(props, "date_end")
  const ranged = LibNavigation.getArgs(props, "ranged")
  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(LibNavigation.getResultKey(props))
  }, [])

  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' }}>
      <EventHeader title={esp.lang("event/date_picker", "header_title")} />
      <CalendarPicker
        allowRangeSelection={ranged == 'ranged' ? true : false}
        weekdays={[esp.lang("event/date_picker", "day_1"), esp.lang("event/date_picker", "day_2"), esp.lang("event/date_picker", "day_3"), esp.lang("event/date_picker", "day_4"), esp.lang("event/date_picker", "day_5"), esp.lang("event/date_picker", "day_6"), esp.lang("event/date_picker", "day_7")]}
        months={[esp.lang("event/date_picker", "month_jan"), esp.lang("event/date_picker", "month_feb"), esp.lang("event/date_picker", "month_mar"), esp.lang("event/date_picker", "month_apr"), esp.lang("event/date_picker", "month_mei"), esp.lang("event/date_picker", "month_jun"), esp.lang("event/date_picker", "month_jul"), esp.lang("event/date_picker", "month_aug"), esp.lang("event/date_picker", "month_sept"), esp.lang("event/date_picker", "month_oct"), esp.lang("event/date_picker", "month_nov"), esp.lang("event/date_picker", "month_des")]}
        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 : LibUtils.moment().add(10, 'years').localeFormat("YYYY-MM-DD")}
      />
      <View style={{ margin: 15, height: 1, backgroundColor: '#e3e3e3' }} />
      {
        ranged == 'ranged' ?
          <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("event/date_picker", "select_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("event/date_picker", "select_date_end")}</Text>
            }
          </View>
          :
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 15, marginRight: 15 }}>
            <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{esp.lang("event/date_picker", "select_date")}</Text>
          </View>
      }
      {
        ranged == 'ranged' ?
          <>
            {
              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("event/date_picker", "day", String(Number(diffDays + 1)))}</Text>
                </View>
                <View style={{ margin: 15, marginTop: 0 }}>
                  <EventButton 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("event/date_picker", "days", String(Number(diffDays + 1)))
                    })
                  }} label={esp.lang("event/date_picker", "btn_save")} backgroundColor="#fff" borderColor="#51b596" fontColor="#51b596" />
                </View>
              </>
            }
          </>
          :
          <>
            <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")}</Text>
            </View>
            <View style={{ margin: 15, marginTop: 0 }}>
              <EventButton onPress={() => {
                LibNavigation.sendBackResult({
                  date_start: moment(selectedStartDate).localeFormat("YYYY-MM-DD")
                })
              }} label={esp.lang("event/date_picker", "btn_save!")} backgroundColor="#fff" borderColor="#51b596" fontColor="#51b596" />
            </View>
          </>
      }
    </View>
  )
}