import React, {useCallback, useEffect, useRef, useState} from 'react';
import {ListRenderItem, View} from 'react-native';
import {Divider, List} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Navigation} from '@interfaces/navigation';
import {openTimeTracker} from '@modules/timeTracking/redux';
import {DaySummary} from '@modules/timeTracking/interfaces';
import {CurrentDates, useGetCheckHistory} from '@modules/timeTracking/hooks';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import CheckHistoryListSk from './components/CheckHistoryListSk';
import DaySelector from './components/DaySelector';
import DaySummaryItem from './components/DaySummaryItem';
import {styles} from './styles';

const keyExtractor = (item: DaySummary) => `${item.id}`;
const ItemSeparatorComponent = () => <Divider style={styles.separator} />;

function CheckHistory({
  navigation,
  route: {params},
}: Navigation<Screens.CHECK_HISTORY>) {
  const {theme} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding();
  const preventOpenModal = useRef(false);
  const [currentDates, setCurrentDates] = useState<CurrentDates>(null);
  const [openedSummaryId, setOpenedSummaryId] =
    useState<Nullable<number>>(null);
  const daySummaries = useGetCheckHistory(currentDates);

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

  const onDateChange = useCallback((start: Date, end: Date) => {
    setOpenedSummaryId(null);
    setCurrentDates({start, end});
  }, []);

  const renderItem: ListRenderItem<DaySummary> = useCallback(
    ({item}) => {
      const isOpened = item.id === openedSummaryId;
      const onItemPress = () => {
        setOpenedSummaryId(isOpened ? null : item.id);
      };
      return (
        <DaySummaryItem
          daySummary={item}
          isOpened={isOpened}
          onPress={onItemPress}
        />
      );
    },
    [openedSummaryId],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default, paddingBottom},
      ]}>
      <DaySelector onDateChange={onDateChange} />
      <List
        bounces={false}
        data={daySummaries}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        showsVerticalScrollIndicator={false}
        style={[
          styles.weekContainer,
          {
            backgroundColor: theme.background.layout.tertiary,
            borderColor: theme.border.neutral.default,
          },
        ]}
        ItemSeparatorComponent={ItemSeparatorComponent}
        ListEmptyComponent={<CheckHistoryListSk />}
      />
    </View>
  );
}

export default CheckHistory;