import React, { useMemo } from 'react';
import { Image, TouchableHighlight } from 'react-native';
import { useSelector } from 'react-redux';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { AndroidScoped } from 'react-native-file-access';
import { MEME_TYPE, Meme } from '../../../database';
import { RootState } from '../../../state';
import { MemeFail } from '../../../components';
import { getFontAwesome5IconSize } from '../../../utilities';
import { useMemeDimensions } from '../../../hooks';

const MemesGridItem = ({
  meme,
  index,
  focusMeme,
}: {
  meme: Meme;
  index: number;
  focusMeme: (index: number) => void;
}) => {
  const { width } = useSafeAreaFrame();
  const gridColumns = useSelector(
    (state: RootState) => state.settings.gridColumns,
  );
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const storageUri = useSelector(
    (state: RootState) => state.settings.storageUri,
  )!;

  const uri = AndroidScoped.appendPath(storageUri, meme.filename);

  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);

  const itemWidth = (width * 0.92 - 5) / gridColumns;

  const mediaComponent = useMemo(() => {
    switch (meme.memeType) {
      case MEME_TYPE.IMAGE:
      case MEME_TYPE.GIF:
      case MEME_TYPE.VIDEO: {
        return (
          <Image
            source={{ uri }}
            style={[
              {
                width: itemWidth,
                height: itemWidth,
              },
            ]}
          />
        );
      }
      default: {
        return <></>;
      }
    }
  }, [itemWidth, meme.memeType, uri]);

  if (!error && (loading || !dimensions)) return <></>;

  return (
    <TouchableHighlight onPress={() => focusMeme(index)}>
      {error ? (
        <MemeFail
          style={{
            width: (width * 0.92 - 5) / gridColumns,
            height: (width * 0.92 - 5) / gridColumns,
          }}
          iconSize={getFontAwesome5IconSize(gridColumns)}
        />
      ) : (
        mediaComponent
      )}
    </TouchableHighlight>
  );
};

export default MemesGridItem;