import { Replay, Stop } from '@mui/icons-material';
import HighlightOff from '@mui/icons-material/HighlightOff';
import { Avatar, IconButton } from '@mui/material';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Grid from '@mui/material/Grid';
import { useRetry } from '@rpldy/retry-hooks';
import { PreviewComponentProps } from '@rpldy/upload-preview/types';
import {
  useAbortItem,
  useItemAbortListener,
  useItemErrorListener,
  useItemFinishListener,
  useItemProgressListener,
} from '@rpldy/uploady';
import React, { memo, useCallback, useState } from 'react';
import PhotoPreview from './PhotoPreview';

const STATUS = {
  PROGRESS: 'PROGRESS',
  DONE: 'DONE',
  ABORTED: 'ABORTED',
  ERROR: 'ERROR',
};

const DeleteIcon = ({ onClick }: { onClick: () => void }) => (
  <Box
    sx={{
      position: 'absolute',
      top: 0,
      right: 0,
      p: 0.2,
      background: 'white',
      borderRadius: 10,
    }}
  >
    <IconButton sx={{ p: 0 }} color="error" disableRipple onClick={onClick}>
      <HighlightOff />
    </IconButton>
  </Box>
);

const CircularProgressWithButtons = (props: any) => {
  const { value, height, itemState, onAbortItem, onDeleteItem, onRetryItem } =
    props;

  return (
    <Box
      sx={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'stretch',
        p: 1,
      }}
    >
      {itemState === STATUS.ERROR || itemState === STATUS.ABORTED ? (
        <Box
          sx={{
            flex: 1,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(235, 235, 235, 0.5)',
          }}
        >
          <DeleteIcon onClick={onDeleteItem} />
          <Avatar
            sx={{
              width: 0.7 * height,
              height: 0.7 * height,
              backgroundColor: 'error.main',
            }}
          >
            <IconButton disableRipple onClick={onRetryItem}>
              <Replay sx={{ color: 'white' }} />
            </IconButton>
          </Avatar>
        </Box>
      ) : (
        <Box
          sx={{
            flex: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'rgba(235, 235, 235, 0.5)',
          }}
        >
          <CircularProgress
            variant="determinate"
            size={0.9 * height}
            value={value}
            sx={{
              '.MuiCircularProgress-circle': {
                color: 'info.main',
              },
            }}
          />
          <Box
            sx={{
              position: 'absolute',
              inset: 0,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Avatar
              sx={{
                width: 0.7 * height,
                height: 0.7 * height,
                backgroundColor: 'info.main',
              }}
            >
              <IconButton disableRipple onClick={onAbortItem}>
                <Stop sx={{ color: 'white' }} />
              </IconButton>
            </Avatar>
          </Box>
        </Box>
      )}
    </Box>
  );
};

const PhotoUploadQueue = memo((props: PreviewComponentProps) => {
  const [progress, setProgress] = useState(0);
  const [itemState, setItemState] = useState('');
  const [imageId, setImageId] = useState('');
  const [isDeleted, setIsDeleted] = useState(false);
  const retry = useRetry();
  const abortItem = useAbortItem();
  const {
    id,
    name,
    url,
    previewHeight,
    previewPadding,
    imageIdList,
    deletedImageIdList,
    handleErrorImage,
  } = props;

  const onAbortItem = useCallback(() => {
    abortItem(id);
  }, [id, abortItem]);

  const onDeleteItem = () => {
    setIsDeleted(true);
    if (imageId) {
      handleErrorImage(imageId);
    }
  };

  const onRetryItem = () => {
    retry(id);
  };

  useItemProgressListener((item) => {
    if (item.completed > progress) {
      setProgress(item.completed);
      setItemState(item.completed === 100 ? STATUS.DONE : STATUS.PROGRESS);
    }
  }, id);

  useItemAbortListener(() => {
    setItemState(STATUS.ABORTED);
  }, id);

  useItemErrorListener((item) => {
    if (item.uploadResponse?.data?.data?.id) {
      setImageId(item.uploadResponse.data.data.id);
    }
    setItemState(STATUS.ERROR);
  }, id);

  useItemFinishListener((item) => {
    setImageId(item.uploadResponse.data.data.id);
  }, id);

  if (
    (itemState === STATUS.DONE && imageIdList.includes(imageId)) ||
    deletedImageIdList.includes(imageId) ||
    isDeleted
  ) {
    return null;
  }

  return (
    <Grid item sx={{ position: 'relative' }}>
      <PhotoPreview
        src={url}
        alt={name}
        queueItem={true}
        enableDelete={false}
      />
      <CircularProgressWithButtons
        value={progress}
        height={previewHeight}
        padding={previewPadding}
        itemState={itemState}
        onAbortItem={onAbortItem}
        onRetryItem={onRetryItem}
        onDeleteItem={onDeleteItem}
      />
    </Grid>
  );
});

export default PhotoUploadQueue;