import React, { ReactNode, useState } from 'react';
import { Modal, View, TouchableOpacity } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import { ImageViewerProps } from './interface';
import { mergeProps } from '../../core/helpers';
import styles from './style';
import { ToastProvider } from '../Toast/ToastProvider';

const defaultProps = {
  backgroundColor: '#333333',
  horizontal: true,
};

const filterFalsyChildren = (children: ReactNode) => {
  return React.Children.toArray(children).filter(
    (child) => child !== null && child !== undefined
  );
};

const PreviewImageModal = (p: ImageViewerProps) => {
  const props: ImageViewerProps = mergeProps(defaultProps, p);
  const {
    hiddenPreviewModal,
    previewImageIndex,
    imageUrls,
    backgroundColor,
    children,
    visible: cusVisible,
    onVisibleChange,
    index,
    horizontal,
  } = props;
  const [clickNumber, setClickNumber] = useState(0);
  const [visible, setVisible] = useState(false);

  const onPressImg = (i: number) => {
    previewImageIndex?.(i);
    setClickNumber(i);
    setVisible(true);
    onVisibleChange?.(true);
  };

  const onClick = () => {
    setVisible(false);
    onVisibleChange?.(false);
    hiddenPreviewModal?.();
  };

  return (
    <View
      style={[
        styles.container,
        { flexDirection: horizontal ? 'row' : 'column' },
      ]}
    >
      {filterFalsyChildren(children).map(
        (child: ReactNode, imageIndex: number) => (
          <TouchableOpacity
            key={imageIndex}
            onPress={() => onPressImg(imageIndex)}
          >
            {child}
          </TouchableOpacity>
        )
      )}
      <Modal visible={cusVisible ?? visible} transparent={true}>
        <ImageViewer
          onChange={previewImageIndex as any}
          saveToLocalByLongPress={false}
          index={index ?? clickNumber}
          imageUrls={imageUrls}
          enableSwipeDown={false}
          onClick={onClick}
          backgroundColor={backgroundColor}
          enableImageZoom
        />
        <ToastProvider />
      </Modal>
    </View>
  );
};

export default PreviewImageModal;