import React, { useEffect, useState } from 'react';
import { Image } from 'antd';
import { ChangeImgUrl } from '@/utils';
const Preview = ({ imageUrl, isPreview, setIsPreview }: any) => {
  console.log(isPreview);
  const [imgs, setImgs] = useState<any[]>([]);

  useEffect(() => {
    setImgs(
      imageUrl.map((item: any) => {
        return ChangeImgUrl(item);
      })
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div style={{ display: 'none' }}>
      <Image.PreviewGroup
        preview={{
          visible: isPreview,
          onVisibleChange: vis => setIsPreview(vis),
          current: imgs.indexOf(isPreview),
        }}
      >
        {imgs?.map((item: any) => {
          return <Image key={item} src={ChangeImgUrl(item)} />;
        })}
      </Image.PreviewGroup>
    </div>
  );
};

export default Preview;