import ReactImageUploading from "react-images-uploading";
import { Grid } from "../grid/Grid";
import { Button, IconButton, Tooltip } from "@mui/material";
import UploadIcon from "@mui/icons-material/Upload";
import { SPACING } from "../../data/spacing";
import React from "react";
import { PropTypes } from "prop-types";
import PublishedWithChangesIcon from "@mui/icons-material/PublishedWithChanges";
import DeleteIcon from "@mui/icons-material/Delete";

export const ImageUpload = ({
  images,
  onChange,
  maxNumber,
  title,
  disabled,
  showImages,
  size,
}) => {
  let showImagesList;
  if (showImages === undefined || showImages === true) {
    showImagesList = true;
  } else {
    showImagesList = false;
  }

  return (
    <ReactImageUploading
      multiple
      value={images}
      onChange={onChange}
      maxNumber={maxNumber}
      dataURLKey="data_url"
      acceptType={["jpg"]}
    >
      {({
        imageList,
        onImageUpload,
        onImageRemoveAll,
        onImageUpdate,
        onImageRemove,
        isDragging,
        dragProps,
      }) => (
        // write your building UI
        <Grid
          container
          direction={"column"}
          alignItems={"center"}
          className="upload__image-wrapper"
          gap={SPACING.SMALL}
        >
          {showImagesList && (
            <>
              {imageList.map((image, index) => (
                <Grid
                  container
                  key={index}
                  gap={SPACING.SMALL}
                  direction={"row"}
                  mt={SPACING.SMALL}
                  justifyContent="center"
                  alignItems="center"
                  xs={12}
                >
                  <img
                    src={image.data_url}
                    alt="profile"
                    height={size === "small" ? "50" : "100"}
                    width={size === "small" ? "50" : "100"}
                    style={{ borderRadius: "5px" }}
                  />
                  <Grid
                    container
                    gap={size === "small" ? 0.5 : SPACING.SMALL}
                    justifyContent="center"
                    alignItems="center"
                    xs={12}
                  >
                    <Grid>
                      <Tooltip title="جایگزین کردن" placement="bottom">
                        <IconButton
                          color="primary"
                          size={size}
                          variant="outlined"
                          onClick={() => onImageUpdate(index)}
                        >
                          <PublishedWithChangesIcon />
                        </IconButton>
                      </Tooltip>
                    </Grid>
                    <Grid>
                      <Tooltip title="حذف" placement="bottom">
                        <IconButton
                          color="error"
                          size={size}
                          variant="outlined"
                          onClick={() => onImageRemove(index)}
                        >
                          <DeleteIcon />
                        </IconButton>
                      </Tooltip>
                    </Grid>
                  </Grid>
                </Grid>
              ))}
            </>
          )}

          {imageList?.length !== maxNumber && (
            <Grid>
              <Button
                size={size}
                disabled={disabled}
                variant="text"
                startIcon={<UploadIcon />}
                style={isDragging ? { color: "red" } : null}
                onClick={onImageUpload}
                {...dragProps}
              >
                {images.length >= 1 ? "بارگذاری سند جدید" : title}
              </Button>
            </Grid>
          )}
        </Grid>
      )}
    </ReactImageUploading>
  );
};

ImageUpload.propTypes = {
  images: PropTypes.array,
  onChange: PropTypes.func,
  maxNumber: PropTypes.number,
  title: PropTypes.string,
  disabled: PropTypes.any,
};
