import React, {useEffect, useRef} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconSpeakerphone} from '@tabler/icons-react-native';
import {useQuery} from 'react-query';
import {Accordion, AccordionRef, Button, Typography} from '@components';
import {useCursorInfinityQuery} from '@hooks/queries/useCursorInfinityQuery';
import {UserPermissions} from '@interfaces/user';
import {keyUpdatesQueryKeys} from '@modules/keyUpdates/constants';
import {
  getKeyUpdatesPreview,
  getUnreadKeyUpdatesCount,
} from '@modules/keyUpdates/service';
import {usePostById} from '@modules/post/store/useFeedStore';
import {
  usePostById as useGroupPostById,
  useGroupFeedStore,
} from '@modules/group/store/useGroupFeedStore';
import {addFeedPost} from '@modules/post/utils';
import {usePermission} from '@redux/selectors';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import FeedPostItem from '../FeedPostItem';

function KeyUpdatesAlert() {
  const {t} = useTranslation();
  const {navigate} = useNavigation();
  const {theme} = useTheme();
  const accordionRef = useRef<AccordionRef>(null);
  const canSeeKeyUpdates = usePermission(UserPermissions.VIEW_KEY_UPDATES);
  const {data: keyUpdatePreviewPosts} = useCursorInfinityQuery({
    queryKey: keyUpdatesQueryKeys.keyUpdatesPreview,
    queryFn: () => getKeyUpdatesPreview(),
    options: {
      enabled: canSeeKeyUpdates,
    },
  });
  const keyUpdatePreviewPostId = keyUpdatePreviewPosts?.[0]?.id;
  const {data: keyUpdateNotifications, isLoading: isLoadingKeyUpdates} =
    useQuery(
      keyUpdatesQueryKeys.unreadKeyUpdatesCount,
      getUnreadKeyUpdatesCount,
      {enabled: canSeeKeyUpdates},
    );
  const initialCollapsed = !!(keyUpdateNotifications || keyUpdatePreviewPostId);
  const post = usePostById(keyUpdatePreviewPostId);
  const groupPost = useGroupPostById(
    post?.group?.id ?? 0,
    keyUpdatePreviewPostId,
  );
  const {addPost: addGroupPost} = useGroupFeedStore.getState();

  useEffect(() => {
    if (!post && keyUpdatePreviewPosts?.[0]) {
      addFeedPost(keyUpdatePreviewPosts[0]);
    }
  }, [post, keyUpdatePreviewPosts]);

  useEffect(() => {
    if (post?.group && !groupPost) {
      addGroupPost(post.group.id!, post);
    }
  }, [post, addGroupPost, groupPost]);

  const onUnreadKeyUpdatesPress = () => navigate(Screens.KEY_UPDATES);

  useEffect(() => {
    initialCollapsed && accordionRef.current?.setCollapsed();
  }, [initialCollapsed]);

  return canSeeKeyUpdates ? (
    <Accordion
      ref={accordionRef}
      initialCollapsed={initialCollapsed}
      style={styles.accordion}>
      <Accordion.Header>
        <Accordion.Avatar Icon={IconSpeakerphone} variant="highlight" />
        <Accordion.Title title={t('key_updates.title')} />
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Content>
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {t('key_updates.description')}
        </Typography>
        {!!keyUpdatePreviewPostId && (
          <View
            style={[
              styles.postContainer,
              {borderColor: theme.border.neutral.default},
            ]}>
            <FeedPostItem
              postId={keyUpdatePreviewPostId}
              isPreviewPost
              withOptions={false}
              alwaysShowGroupPosts
            />
          </View>
        )}
        <Button
          onPress={onUnreadKeyUpdatesPress}
          isLoading={isLoadingKeyUpdates}
          text={
            keyUpdateNotifications
              ? t('key_updates.unreads_count', {
                  count: keyUpdateNotifications,
                })
              : t('key_updates.show_all')
          }
          size="sm"
        />
      </Accordion.Content>
    </Accordion>
  ) : null;
}

export default KeyUpdatesAlert;