nomadmania-app/src/components/Calendars/RangeCalendar/index.tsx

import React, { useMemo, useState } from 'react';
import { View } from 'react-native';
import CalendarPicker, { CustomDatesStylesFunc, CustomDayHeaderStylesFunc } from 'react-native-calendar-picker';
import moment from 'moment';
import { Modal } from '../../Modal';
import Navigation from './Navigation';

import { styles } from './style';
import { Colors } from '../../../theme';

export default function RangeCalendar(
  { isModalVisible, closeModal }: { isModalVisible: boolean, closeModal: () => void }
) {
  const [selectedStartDate, setSelectedStartDate] = useState<Date | null>(null);
  const [selectedEndDate, setSelectedEndDate] = useState<Date | null>(null);

  const handleOnDateChange = (date: Date, type: string) => {
    if (type === 'END_DATE') {
      setSelectedEndDate(date);
    } else {
      setSelectedStartDate(date);
      setSelectedEndDate(null);
    }
  };

  const customDayHeaderStyles: CustomDayHeaderStylesFunc = () => {
    return {
      textStyle: styles.dayHeader,
    };
  };

  const customSelectedDatesStyles: CustomDatesStylesFunc = useMemo(() => {
    return (date: moment.Moment) => {
      if (date.isSame(moment(), 'day')) {
        return {
          containerStyle: {},
          textStyle: {
            borderWidth: 1,
            borderColor: Colors.DARK_BLUE,
            borderRadius: 17,
            height: 34,
            width: 34,
            textAlign: 'center',
            verticalAlign: 'middle',
          },
          style: {
            backgroundColor: Colors.WHITE,
          }
        };
      }
      return {
        containerStyle: {},
        textStyle: {},
      };
    };
  }, []);

  const resetSelections = () => {
    closeModal();
    setSelectedStartDate(null);
    setSelectedEndDate(null);
  };

  const prevNavigationComponent = useMemo(() => <Navigation direction="prev" />, []);
  const nextNavigationComponent = useMemo(() => <Navigation direction="next" />, []);

  return (
    <Modal
      visibleInPercent={'70%'}
      visible={isModalVisible}
      onRequestClose={resetSelections}
      headerTitle='Select Date'
    >
      <View style={styles.modalContent}>
        <CalendarPicker
          scaleFactor={400}
          allowRangeSelection
          allowBackwardRangeSelect
          onDateChange={handleOnDateChange as any}
          selectedStartDate={selectedStartDate as Date}
          selectedEndDate={selectedEndDate as Date}
          scrollable
          showDayStragglers
          previousComponent={prevNavigationComponent}
          nextComponent={nextNavigationComponent}
          dayLabelsWrapper={styles.labelsWrapper}
          selectedRangeStyle={styles.rangeStyle}
          selectedRangeEndTextStyle={styles.rangeStartEndTextStyle}
          selectedRangeStartTextStyle={styles.rangeStartEndTextStyle}
          selectedRangeEndStyle={[styles.rangeStartEndStyle, styles.rangeEndStyle]}
          selectedRangeStartStyle={[styles.rangeStartEndStyle, styles.rangeStartStyle]}
          customDayHeaderStyles={customDayHeaderStyles}
          customDatesStyles={customSelectedDatesStyles}
          disabledDatesTextStyle={styles.disabledDates}
          textStyle={styles.textStyle}
          monthTitleStyle={styles.dateTitle}
          yearTitleStyle={styles.dateTitle}
          headerWrapperStyle={styles.headerWrapper}
        />
      </View>
    </Modal>
  );
}