import { Box, Button, Grid } from '@mui/material';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import React from 'react';
import { useStyles } from './styles/ImagePreviewComponentStyles';
import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
import RemoveOutlinedIcon from '@mui/icons-material/RemoveOutlined';
import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
import { FILE_EXTENTIONS_ICONS } from '../constants';

const ImagePreviewControls = ({ zoomIn, zoomOut, resetTransform }) => {
  const classes = useStyles();

  return (
    <Grid className={classes.controlButtons}>
      <Button
        className={`${classes.zoomOutButton} ${classes.controlButton}`}
        onClick={() => zoomOut()} // No need to wrap this in a function
      >
        <RemoveOutlinedIcon className={classes.iconSize} />
      </Button>
      <Button
        className={`${classes.zoomResetButton} ${classes.controlButton}`}
        onClick={() => resetTransform()}
      >
        <ZoomOutOutlinedIcon className={classes.iconSize} />
      </Button>
      <Button
        className={`${classes.zoomInButton} ${classes.controlButton}`}
        onClick={() => zoomIn()}
      >
        <AddOutlinedIcon className={classes.iconSize} />
      </Button>
    </Grid>
  );
};

const ImagePreviewComponent = ({
  fileUrl,
  fileExtension,
  handleDownload,
  ref,
}) => {
  const classes = useStyles();
  return (
    <>
      {fileExtension === 'pdf' ? (
        <>
          <Box className={classes.pdfAndDocPreviewBox}>
            <img
              alt="Uploaded file"
              src={FILE_EXTENTIONS_ICONS[fileExtension]}
              ref={ref}
              height="145px"
              width="auto"
            />
            <Button
              className={classes.pdfAndDocPreviewDownloadButton}
              variant="contained"
              onClick={handleDownload}
            >
              Download
            </Button>
          </Box>
        </>
      ) : fileExtension === 'doc' ||
        fileExtension === 'docx' ||
        fileExtension ===
          'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
        fileExtension === 'msword' ? (
        <>
          <Box className={classes.pdfAndDocPreviewBox}>
            <img
              alt="Uploaded file"
              src={FILE_EXTENTIONS_ICONS[fileExtension]}
              ref={ref}
              height="145px"
              width="auto"
            />
            <Button
              className={classes.pdfAndDocPreviewDownloadButton}
              variant="contained"
              onClick={handleDownload}
            >
              Download
            </Button>
          </Box>
        </>
      ) : (
        <TransformWrapper>
          {(utils) => (
            <React.Fragment>
              <Box className={classes.transFormImageBox}>
                <TransformComponent
                  wrapperClass={classes.customTransFormWrapper}
                >
                  <img
                    alt="Uploaded file"
                    src={fileUrl}
                    ref={ref}
                    height="250px"
                    width="auto"
                  />
                </TransformComponent>
              </Box>
              <ImagePreviewControls {...utils} />
            </React.Fragment>
          )}
        </TransformWrapper>
      )}
    </>
  );
};

export default ImagePreviewComponent;
