import {StyleSheet} from 'react-native';
import React, {forwardRef, useImperativeHandle} from 'react';
import Video, {VideoProperties} from 'react-native-video';
import Image, {FastImageProps} from 'react-native-fast-image';

export type MediaRef = {
  get: () => undefined;
};

type MediaProps = {
  sourceUrl: string;
  captureType: 'Image' | 'Video';
} & Omit<VideoProperties, 'source'> &
  Omit<FastImageProps, 'source'>;

const Media = forwardRef<MediaRef, MediaProps>((props, ref) => {
  useImperativeHandle(ref, () => ({
    get() {
      return;
    },
  }));

  return (
    <>
      {(props.captureType === 'Image' && (
        <Image
          {...props}
          style={styles.listItem}
          source={{
            uri: props.sourceUrl,
          }}
        />
      )) || (
        <Video
          {...props}
          style={styles.listItem}
          source={{
            uri: props.sourceUrl,
          }}
        />
      )}
    </>
  );
});

export default Media;

const styles = StyleSheet.create({
  listItem: {
    width: '100%',
    aspectRatio: 16 / 9,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#d9d9d9',
    position: 'relative',
  },
});