import { useState } from 'react';
import { Dialog } from '@/components/ui';
import ImgZoom from './ImgZoom';

const ImgZoomPopup = (props) => {
  const { imgSrc, imgAlt, imgId, classNameInDialog, className,width,height } = props;
  const [dialogIsOpen, setDialogIsOpen] = useState(false);

  const onDialogClose = (e) => {
    setDialogIsOpen(false);
  };

  const setIsOpen = (isOpen) => {
    setDialogIsOpen(isOpen);
  };

  return (
    <>
      <img src={imgSrc} className={className} alt={imgAlt} onClick={() => setIsOpen(true)} />
      <Dialog isOpen={dialogIsOpen} onClose={onDialogClose} onRequestClose={onDialogClose} className="w-full">
        <ImgZoom>
          <img
            id={imgId}
            src={imgSrc}
            className={classNameInDialog}
            alt={imgAlt}
            width={width}
            height={height}
          />
        </ImgZoom>
      </Dialog>
    </>
  );
};

ImgZoomPopup.defaultProps = {
  imgSrc: '',
  imgAlt: '',
  imgId: '',
  className: 'cursor-pointer h-full w-56 object-contain',
  classNameInDialog: 'cursor-pointer h-full w-full object-contain',
};

// Example usage
// const App = () => {
//   return (
//     <ImgZoomPopup
//       imgSrc="image.jpg"
//       imgAlt="test"
//       imgId="imgExample"
//       className="cursor-pointer h-full w-56 object-contain"
//       classNameInDialog="cursor-pointer h-full w-full object-contain"
//     />
//    
//   );
// };

export default ImgZoomPopup;
