import {
  ImageRendererProps,
  SimpleGallery,
  SimpleGalleryItemType,
} from '@gallery-toolkit/simple-gallery';
import { useHeaderHeight } from '@react-navigation/stack';
import React from 'react';
import { Dimensions, Text } from 'react-native';

const { height } = Dimensions.get('window');

const images = new Map<number, SimpleGalleryItemType>([
  [
    1,
    {
      width: 300,
      height: 300,
      uri: 'https://placekitten.com/300/300',
    },
  ],
  [
    2,
    {
      width: 400,
      height: 200,
      uri: 'https://placekitten.com/400/200',
    },
  ],
]);

interface PageProps
  extends ImageRendererProps<SimpleGalleryItemType> {
  index: number;
}

function Page(props: PageProps) {
  if (typeof props.item === 'undefined') {
    return <Text>Index {props.index} is Undefined</Text>;
  }

  return <SimpleGallery.ImageRenderer {...props} />;
}

export default function StandaloneMap() {
  const initialIndex = 1;
  const headerHeight = useHeaderHeight();

  const totalCount = 3;

  function handleIndexChange(i: number) {
    'worklet';
    console.log(i);
    // you can fetch more items and store it to the map here
  }

  return (
    <SimpleGallery
      initialIndex={initialIndex}
      onIndexChange={handleIndexChange}
      height={height - headerHeight}
      renderPage={(props, i) => <Page {...props} index={i} />}
      getItem={(data, i) => data.get(i)}
      items={images}
      getTotalCount={() => totalCount}
    />
  );
}