import React, { useState } from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';

import * as Colors from './utils/Colors';
import { DefaultCalendarTheme } from './utils/Constants';
import { Icon } from 'react-native-elements';
import { Text, StyleSheet, View, TouchableOpacity, Image } from 'react-native';
import type { DateTimePickerProperties } from './properties/Properties';
import * as Style from './utils/Style';
import {
  parseDateToCalendarFormat,
  parseDateOrUndefined,
  parseDate,
} from './utils/DateUtils';

LocaleConfig.locales['en'] = {
  monthNames: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ],
  monthNamesShort: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ],
  dayNames: [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ],
  dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  today: 'Today',
};

LocaleConfig.defaultLocale = 'en';

const CalendarWithTimer = (
  props: DateTimePickerProperties = {
    startDate: '',
    endDate: '',
    startTime: { hour: 0, minutes: 0, amPm: '' },
    endTime: { hour: 0, minutes: 0, amPm: '' },
    setStartTime: () => {},
    setEndTime: () => {},
    currentDate: '',
    onDateSelect: () => {},
    onDoneSelect: () => {},
    onStartEndChanged: () => {},
    openBottomSheet: true,
    selectedDate: '',
    calendarTheme: DefaultCalendarTheme,
    onStartDateSelect: () => {},
    onEndDateSelect: () => {},
    onStartTimeSelect: () => {},
    onEndTimeSelect: () => {},
  }
) => {
  const [startDate, setStartDate] = useState(
    parseDateToCalendarFormat(props.startDate)
  );
  const [selected, setSelected] = useState(
    parseDateToCalendarFormat(props.selectedDate)
  );
  const [endDate, setEndDate] = useState(
    parseDateToCalendarFormat(props.endDate)
  );
  const [isStartDateSelected, setIsStartDateSelected] = useState<boolean>(true);
  const [isEndDateSelected, setIsEndDateSelected] = useState<boolean>(false);

  const Arrow = () => {
    return <Icon name="chevron-back-outline" color="#900" />;
  };

  const onDayPress = (day: any) => {
    if (isStartDateSelected) {
      setStartDate(day.dateString);
      props.onStartDateSelect(day.dateString);
    } else {
      setEndDate(day.dateString);
      props.onEndDateSelect(day.dateString);
    }
    setSelected(day.dateString);
    props.onDateSelect(day);
  };

  function renderCustomHeader(date: any) {
    const header = date.toString('yyyy-MMMM');
    const [month] = header.split(' ');
    return (
      <View style={styles.header}>
        <Text
          style={[
            styles.month,
            {
              fontSize: 18,
              fontWeight: 'bold',
              paddingTop: 10,
              paddingBottom: 10,
              color: Colors.PrimaryColor,
              paddingRight: 5,
            },
          ]}
        >{`${month}`}</Text>
      </View>
    );
  }

  function SelectDate() {
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'stretch',
          justifyContent: 'space-between',
          marginTop: 8.0,
        }}
      >
        <TouchableOpacity
          style={{
            padding: 8,
            alignSelf: 'center',
            borderWidth: 0.5,
            borderRadius: 5,
            alignItems: 'stretch',
            paddingHorizontal: 5,
            flex: 1,
            borderColor: isStartDateSelected
              ? Colors.PrimaryColor
              : Colors.LightGrey,
          }}
          onPress={() => {
            setIsStartDateSelected(true);
            setIsEndDateSelected(false);
            props.onStartEndChanged(1);
            let parsed = parseDateToCalendarFormat(startDate);
            setSelected(parsed);
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              height: 25,
            }}
          >
            <Text
              style={[
                Style.styleSheet.smallText,
                {
                  color: isStartDateSelected
                    ? Colors.PrimaryColor
                    : Colors.Black,
                },
              ]}
            >
              {parseDate(startDate)}
            </Text>

            <Image
              style={{
                width: 12,
                height: 12,
                alignSelf: 'center',
                tintColor: isStartDateSelected
                  ? Colors.PrimaryColor
                  : Colors.Grey,
              }}
              source={require('./images/ic_down.png')}
              resizeMode="contain"
            />
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            padding: 8,
            alignSelf: 'center',
            borderWidth: 0.5,
            borderRadius: 5,
            alignItems: 'stretch',
            paddingHorizontal: 5,
            flex: 1,
            borderColor: isEndDateSelected
              ? Colors.PrimaryColor
              : Colors.LightGrey,
            marginStart: 8,
          }}
          onPress={() => {
            setIsStartDateSelected(false);
            setIsEndDateSelected(true);
            props.onStartEndChanged(2);
            setSelected(endDate);
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              height: 25,
            }}
          >
            <Text
              style={[
                Style.styleSheet.smallText,
                {
                  color: isEndDateSelected ? Colors.PrimaryColor : Colors.Black,
                },
              ]}
            >
              {parseDate(endDate)}
            </Text>
            <Image
              style={{
                width: 12,
                height: 12,
                alignSelf: 'center',
                tintColor: isEndDateSelected
                  ? Colors.PrimaryColor
                  : Colors.Grey,
              }}
              source={require('./images/ic_down.png')}
              resizeMode="contain"
            />
          </View>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={{ alignItems: 'stretch', justifyContent: 'flex-start' }}>
      <SelectDate />
      <Calendar
        theme={props.calendarTheme}
        // Initially visible month. Default = Date()
        current={parseDateOrUndefined(props.currentDate)}
        // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
        minDate={isEndDateSelected ? startDate : props.startDate}
        // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
        maxDate={parseDateOrUndefined(props.endDate)}
        // Handler which gets executed on day press. Default = undefined
        onDayPress={onDayPress}
        // Handler which gets executed on day long press. Default = undefined
        onDayLongPress={(_day: any) => {
          // console.log('selected day', day);
        }}
        // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
        monthFormat={'yyyy- MMM'}
        // Handler which gets executed when visible month changes in calendar. Default = undefined
        onMonthChange={(_month: any) => {
          // console.log('month changed', month);
        }}
        // Hide month navigation arrows. Default = false
        hideArrows={true}
        // Replace default arrows with custom ones (direction can be 'left' or 'right')
        renderArrow={(_direction: any) => <Arrow />}
        // Do not show days of other months in month page. Default = false
        hideExtraDays={true}
        // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
        // day from another month that is visible in calendar page. Default = false
        disableMonthChange={false}
        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
        firstDay={1}
        // Hide day names. Default = false
        hideDayNames={false}
        // Show week numbers to the left. Default = false
        showWeekNumbers={false}
        // Handler which gets executed when press arrow icon left. It receive a callback can go back month
        onPressArrowLeft={(subtractMonth: any) => subtractMonth()}
        // Handler which gets executed when press arrow icon right. It receive a callback can go next month
        onPressArrowRight={(addMonth: any) => addMonth()}
        // Disable left arrow. Default = false
        disableArrowLeft={true}
        // Disable right arrow. Default = false
        disableArrowRight={true}
        // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
        /* disableAllTouchEventsForDisabledDays={true} */
        // Replace default month and year title with custom one. the function receive a date as parameter.
        renderHeader={renderCustomHeader}
        // Enable the option to swipe between months. Default = false
        enableSwipeMonths={true}
        markedDates={{
          [selected]: {
            selected: true,
            disableTouchEvent: true,
            selectedColor: Colors.PrimaryColor,
          },
        }}
      />
    </View>
  );
};

export default CalendarWithTimer;

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'flex-start',
    marginTop: 10,
    marginBottom: 10,
  },
  month: {
    marginLeft: 5,
  },
  year: {
    marginRight: 5,
  },
});