import React, { useRef, useState } from 'react';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { StyleSheet } from 'react-native';
import { useQuery, useRealm } from '@realm/react';
import { FlashList } from '@shopify/flash-list';
import { Appbar, Portal, Snackbar } from 'react-native-paper';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { RootStackParamList, ROUTE } from '../types';
import { Meme } from '../database';
import { MemeViewItem } from '../components';
import {
  copyMeme,
  deleteMeme,
  editMeme,
  favoriteMeme,
  multipleIdQuery,
  shareMeme,
} from '../utilities';
import { NavigationProp, useNavigation } from '@react-navigation/native';

const memeViewStyles = StyleSheet.create({
  // eslint-disable-next-line react-native/no-color-literals
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1,
    backgroundColor: 'transparent',
  },
  // eslint-disable-next-line react-native/no-color-literals
  footer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  },
  snackbar: {
    marginBottom: 64,
  },
});

const MemeView = ({
  route,
}: NativeStackScreenProps<RootStackParamList, ROUTE.MEME_VIEW>) => {
  const { height, width } = useSafeAreaFrame();
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const realm = useRealm();

  const { ids } = route.params;
  const [index, setIndex] = useState(route.params.index);

  const [snackbarVisible, setSnackbarVisible] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState('');

  const flashListRef = useRef<FlashList<Meme>>(null);

  const memes = useQuery<Meme>(Meme.schema.name, collectionIn => {
    return collectionIn.filtered(multipleIdQuery(ids));
  });

  if (memes.length === 0) return <></>;

  return (
    <>
      <Appbar.Header style={memeViewStyles.header}>
        <Appbar.BackAction onPress={() => navigation.goBack()} />
        <Appbar.Content title={memes[index].title} />
      </Appbar.Header>
      <FlashList
        ref={flashListRef}
        key={height}
        data={memes}
        initialScrollIndex={index}
        onScroll={event => {
          const newIndex = Math.round(
            event.nativeEvent.contentOffset.x /
              event.nativeEvent.layoutMeasurement.width,
          );
          if (newIndex !== index) setIndex(newIndex);
        }}
        estimatedItemSize={width}
        estimatedListSize={{ height, width }}
        pagingEnabled
        horizontal
        showsHorizontalScrollIndicator={false}
        renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
      />
      <Appbar style={memeViewStyles.footer}>
        <Appbar.Action
          icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
          onPress={() => favoriteMeme(realm, memes[index])}
        />
        <Appbar.Action icon="share" onPress={() => shareMeme(memes[index])} />
        <Appbar.Action
          icon="content-copy"
          onPress={() => {
            copyMeme(memes[index]);
            setSnackbarMessage('Meme copied!');
            setSnackbarVisible(true);
          }}
        />
        <Appbar.Action
          icon="pencil"
          onPress={() => {
            editMeme(navigation, memes[index]);
          }}
        />
        <Appbar.Action
          icon="delete"
          onPress={() => {
            if (index === memes.length - 1) {
              setIndex(index - 1);
              flashListRef.current?.scrollToIndex({
                index: index - 1,
              });
            }
            void deleteMeme(realm, memes[index]);
            if (memes.length === 1) navigation.goBack();
          }}
        />
      </Appbar>
      <Portal>
        <Snackbar
          visible={snackbarVisible}
          onDismiss={() => setSnackbarVisible(false)}
          style={memeViewStyles.snackbar}
          action={{
            label: 'Dismiss',
            onPress: () => setSnackbarVisible(false),
          }}>
          {snackbarMessage}
        </Snackbar>
      </Portal>
    </>
  );
};

export default MemeView;