import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {
  GiphyMediaID,
  GiphyMediaView,
  ResizeMode,
} from '@giphy/react-native-sdk';
import {IconX} from '@tabler/icons-react-native';
import {Spinner, IconButton} from '@components/_HuGo';
import {windowDimensions} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  gif?: GiphyMediaID;
  onDelete?: () => void;
  height?: ViewStyle['height'];
  width?: ViewStyle['width'];
  aspectRatio?: ViewStyle['aspectRatio'];
  resizeMode?: ResizeMode;
  style?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  sending?: boolean;
}

export const GifPreview = ({
  gif,
  onDelete,
  height,
  width,
  aspectRatio,
  style,
  containerStyle,
  resizeMode = ResizeMode.Contain,
  sending,
}: Props) => {
  const {theme} = useTheme();
  const previewStyle = aspectRatio
    ? {aspectRatio}
    : {height: height || windowDimensions.height * 0.3};
  return (
    <View style={[styles.container, containerStyle]}>
      {sending && (
        <View style={styles.spinnerContainer}>
          <Spinner />
        </View>
      )}
      <View pointerEvents="none">
        <GiphyMediaView
          media={gif}
          resizeMode={resizeMode}
          style={[
            {
              width: width || windowDimensions.width,
            },
            previewStyle,
            style,
          ]}
        />
      </View>
      {onDelete && (
        <IconButton
          Icon={IconX}
          iconColor={theme.background.elements.default}
          onPress={onDelete}
          style={[
            styles.deleteButton,
            {
              backgroundColor: theme.black,
              borderColor: theme.background.elements.default,
            },
          ]}
        />
      )}
    </View>
  );
};