import React, {useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Chips} from '@components';
import {useQueryFetchIfEmpty} from '@hooks/queries/useQueryFetchIfEmpty';
import {Navigation} from '@interfaces/navigation';
import {getUnreadKeyUpdatesCount} from '@modules/keyUpdates/service';
import {keyUpdatesQueryKeys} from '@modules/keyUpdates/constants';
import {invalidateUnreads} from '@modules/keyUpdates/utils';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';
import {Screens} from '@shared/constants';

import KeyUpdatesList from './components/KeyUpdatesList';
import {styles} from './styles';

enum KeyUpdatesTabs {
  UNREADS = 1,
  ALL = 2,
}

function KeyUpdates({route: {params}}: Navigation<Screens.KEY_UPDATES>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const defaultUnreads = params?.defaultUnreads;

  useEffect(() => invalidateUnreads, []);
  const {data: unreadKeyUpdatesCount} = useQueryFetchIfEmpty(
    keyUpdatesQueryKeys.unreadKeyUpdatesCount,
    getUnreadKeyUpdatesCount,
  );
  const [selectedTab, setSelectedTab] = useState<KeyUpdatesTabs>(
    unreadKeyUpdatesCount || defaultUnreads
      ? KeyUpdatesTabs.UNREADS
      : KeyUpdatesTabs.ALL,
  );
  const routes = useMemo(
    () =>
      [
        {id: KeyUpdatesTabs.ALL as number, label: t('key_updates.all')},
        {
          id: KeyUpdatesTabs.UNREADS as number,
          label: t('key_updates.unreads'),
        },
      ].filter(Boolean),
    [t],
  );
  const onChangeTab = (id: number) => setSelectedTab(id);

  return (
    <View
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <View style={styles.chipsContainer}>
        <Chips list={routes} selected={selectedTab} onItemPress={onChangeTab} />
      </View>
      <KeyUpdatesList unreads={selectedTab === KeyUpdatesTabs.UNREADS} />
    </View>
  );
}

export default KeyUpdates;