import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';
import Slide from '@mui/material/Slide';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
import RotateRightIcon from '@mui/icons-material/RotateRight';

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

export default function ImageDialog({ imagePath, setIsDialogOpen }) {
  const [open, setOpen] = React.useState(false);


  const [scaleWidthValue, setScaleWidthValue] = React.useState(80);
  const [rotateValue, setRotateValue] = React.useState(0);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setIsDialogOpen(false);
  };

  React.useEffect(() => {
    handleClickOpen();
  }, []);


  const ZoomInImage = () => {
    console.log("Zooming In Image ....");
    const elements = document.getElementsByClassName("scanned-img");
    for (var ele of elements) {
      console.log("Ele is : ", ele);
      const newScaleWidthValue = scaleWidthValue + 10;
      setScaleWidthValue(newScaleWidthValue);
      // ele.style.transform = `scale(${newScaleValue})`;
      ele.style.width = `${newScaleWidthValue}%`;
    }
  };

  const ZoomOutImage = () => {
    console.log("Zooming Out Image ....");
    const elements = document.getElementsByClassName("scanned-img");
    for (var ele of elements) {
      console.log("Ele is : ", ele);
      const newScaleWidthValue = scaleWidthValue - 10;
      setScaleWidthValue(newScaleWidthValue);
      // ele.style.transform = `scale(${newScaleValue})`;
      ele.style.width = `${newScaleWidthValue}%`;
    }
  };

  const RotateImageLeft = () => {
    const elements = document.getElementsByClassName("scanned-img");
    for (var ele of elements) {
      console.log("Ele is : ", ele);
      const newRotateValue = rotateValue - 90;
      setRotateValue(newRotateValue);
      ele.style.transform = `rotate(${newRotateValue}deg)`;
    }
  };

  const RotateImageRight = () => {
    const elements = document.getElementsByClassName("scanned-img");
    for (var ele of elements) {
      console.log("Ele is : ", ele);
      const newRotateValue = rotateValue + 90;
      setRotateValue(newRotateValue);
      ele.style.transform = `rotate(${newRotateValue}deg)`;
    }
  };

  return (
    <React.Fragment>
      <Dialog
        fullScreen
        open={open}
        onClose={handleClose}
        TransitionComponent={Transition}
      >
        <AppBar sx={{ position: 'relative' }}>
          <Toolbar>
            <IconButton
              edge="start"
              color="inherit"
              onClick={handleClose}
              aria-label="close"
            >
              <CloseIcon />
            </IconButton>
            <IconButton
              color="inherit"
              onClick={ZoomInImage}
              aria-label="zoom in"
            >
              <ZoomInIcon />
            </IconButton>
            <IconButton
              color="inherit"
              onClick={ZoomOutImage}
              aria-label="zoom out"
            >
              <ZoomOutIcon />
            </IconButton>
            <IconButton
              color="inherit"
              onClick={RotateImageLeft}
              aria-label="rotate"
            >
              <RotateRightIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', overflow:'auto' }}>
            <img
              className="scanned-img"
              style={{marginTop:'60%'}}
              width={`${scaleWidthValue}%`}
              src={`https://docs.exampaper.vidh.ai/${imagePath}`}
              alt="S3 Image"
            />
        </div>
      </Dialog>
    </React.Fragment>
  );
}