import {useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
import {Navigation} from '@interfaces/navigation';
import {openTimeTracker} from '@modules/timeTracking/redux';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {logAmplitudeEvent} from '@shared/utils';

import DraggableCalendar from './components/DraggableCalendar';
import ShiftsSchedule from './components/ShiftsSchedule';
import {styles} from './styles';

function ShiftsCalendar({
  navigation,
  route: {
    params: {isFromTracker},
  },
}: Navigation<Screens.SHIFTS_CALENDAR>) {
  const {theme} = useTheme();
  const preventOpenModal = useRef(false);
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    logAmplitudeEvent(AMPLITUDE_EVENTS.SHIFT_MANAGEMENT_SHIFTS_VIEWER_OPENED);
  }, []);

  useEffect(() => {
    const blur = navigation.addListener('blur', () => {
      preventOpenModal.current = true;
    });
    const focus = navigation.addListener('focus', () => {
      preventOpenModal.current = false;
    });
    const beforeRemove = navigation.addListener('beforeRemove', () => {
      if (!preventOpenModal.current && isFromTracker) {
        openTimeTracker();
      }
    });
    return () => {
      blur();
      focus();
      beforeRemove();
    };
  }, [isFromTracker, navigation]);

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <DraggableCalendar date={date} onChangeDate={setDate} />
      <ShiftsSchedule date={date} onChangeDate={setDate} />
    </View>
  );
}

export default ShiftsCalendar;