import { ImageProps, Image as AntdImage } from 'antd';

export interface ImageComponentProps extends ImageProps {
  imageSources?: string[];
  showImage?: boolean;
  toggleImageVisibility?: (value: any) => void;
}

const ImageComponent: React.FC<ImageComponentProps> = ({
  src,
  style,
  preview,
  imageSources = [],
  showImage,
  toggleImageVisibility,
  ...args
}) => {
  let myPreview = preview
    ? preview
    : {
        visible: showImage,
        src: src,
      };

  return (
    <>
      <AntdImage
        width={200}
        style={style}
        src={src}
        preview={myPreview}
        {...args}
        onClick={() => toggleImageVisibility && toggleImageVisibility(!showImage)}
      />
      <div style={{ display: 'none' }}>
        <AntdImage.PreviewGroup
          preview={{
            visible: showImage,
            onVisibleChange: (vis) => toggleImageVisibility && toggleImageVisibility(vis),
          }}
        >
          {imageSources.map((data: string, index: number) => (
            <AntdImage src={data} key={index} />
          ))}
        </AntdImage.PreviewGroup>
      </div>
    </>
  );
};

export default ImageComponent;