import React, { FC } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import type { StyleProp, ViewStyle } from 'react-native';
import { IconXClosesmall1 } from '../../icons';
import createStyle from './style';
import { FileInfo, ImageInfo } from './interface';
import { useTheme } from '../Theme/Theme';
import { filePathOSDisplay } from './help';
import Image from '../Image';
import Loading from '../Loading';
import { renderIcon } from './TextList';
import { JPEG, PNG, SVG, WEBP } from './enum';

const imagesTypes = [...JPEG, ...PNG, ...SVG, ...WEBP];

interface ImagePreviewProps {
  file: ImageInfo;
  disabled: boolean;
  deleteIcon?: React.ReactNode;
  showDeleteIcon?: boolean;
  onPreviewImage: () => void;
  onPreviewFile?: (uri: string, file: FileInfo) => void;
  onRemove: () => void;
  onReUpload?: () => void;
  style?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
}
const ImagePreview: FC<ImagePreviewProps> = ({
  file,
  disabled,
  deleteIcon,
  showDeleteIcon: outShowDeleteIcon = true,
  onPreviewImage,
  onPreviewFile,
  onRemove,
  style,
  contentStyle,
}) => {
  const { uri } = file;
  const token = useTheme();
  const styles = createStyle(token);

  const renderDeleteIcon = () => {
    return deleteIcon ? (
      deleteIcon
    ) : (
      <View style={styles.delete_btn}>
        <IconXClosesmall1 fillColor="white" size={token['--font-size-3']} />
      </View>
    );
  };

  const renderLoading = () => (
    <View style={styles.loading}>
      <Loading name="loading-xt" loadingType="circle" size={'small'} />
    </View>
  );

  const renderContent = () => {
    const fileType = uri?.split('.')?.pop()?.toLowerCase();
    if (fileType && imagesTypes.includes(fileType)) {
      return (
        <TouchableOpacity
          onPress={onPreviewImage}
          style={StyleSheet.flatten([styles.btnWrapper, contentStyle])}
        >
          <View style={StyleSheet.flatten([styles.common_btn, contentStyle])}>
            {file.status === 'isUploading' ? (
              renderLoading()
            ) : (
              <Image
                contentFit="contain"
                source={{ uri: filePathOSDisplay(file.uri) }}
                style={StyleSheet.flatten([styles.image_content])}
              />
            )}
          </View>
        </TouchableOpacity>
      );
    }
    return (
      <TouchableOpacity onPress={() => onPreviewFile?.(uri, file)}>
        <View
          style={StyleSheet.flatten([
            styles.image_btn,
            styles.common_btn,
            {
              justifyContent: 'center',
              alignItems: 'center',
            },
            contentStyle,
          ])}
        >
          {file.status === 'isUploading'
            ? renderLoading()
            : renderIcon(uri, 64)}
        </View>
      </TouchableOpacity>
    );
  };

  const showDeleteIcon =
    !disabled && file.status !== 'isUploading' && outShowDeleteIcon;

  return (
    <View style={StyleSheet.flatten([styles.imageWrapper, style])}>
      {showDeleteIcon ? (
        <TouchableOpacity onPress={onRemove} style={styles.deleteIconWrap}>
          {renderDeleteIcon()}
        </TouchableOpacity>
      ) : null}

      {renderContent()}
    </View>
  );
};
export default ImagePreview;