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

interface Props extends ImageProps {
  imgValues?: string[];
  show_image?: boolean;
  setShowImage?: (value: any) => void;
}

const Image: React.FC<Props> = (props) => {
  const { src, style, preview, imgValues = [], show_image, setShowImage, ...args } = props;
  let my_preview = preview
    ? preview
    : {
        visible: show_image,
        src: src,
      };

  return (
    <>
      <MyImage
        width={200}
        style={style}
        src={src}
        preview={my_preview}
        {...args}
        onClick={() => setShowImage && setShowImage(!show_image)}
      />
      <div style={{ display: 'none' }}>
        <MyImage.PreviewGroup
          preview={{
            visible: show_image,
            onVisibleChange: (vis) => setShowImage && setShowImage(vis),
          }}
        >
          {imgValues.map((data: string, index: number) => (
            <MyImage src={data} key={index} />
          ))}
        </MyImage.PreviewGroup>
      </div>
    </>
  );
};

export default Image;