import PropTypes from 'prop-types';
import { Box, useTheme } from '@mui/material';
import { Icon } from '@iconify/react';
import RefreshRoundedIcon from '@iconify-icons/material-symbols/refresh-rounded';

// 需要父元素设置 relative position
export default function RefreshOverlay({ onRefresh, ...rest }) {
  const { palette } = useTheme();
  const handleOnRefresh = (e) => {
    e.stopPropagation();
    onRefresh();
  };

  return (
    <Box
      {...rest}
      onClick={handleOnRefresh}
      sx={{
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(255, 255, 255, 0.75)',
        cursor: 'pointer',
        ...rest.sx,
      }}>
      <Box
        sx={{
          backgroundColor: 'secondary.main',
          borderRadius: '100%',
          fontSize: 0,
        }}>
        <Icon
          icon={RefreshRoundedIcon}
          fontSize={52}
          style={{
            transform: 'scale(0.7)',
            color: palette.secondary.contrastText,
          }}
        />
      </Box>
    </Box>
  );
}

RefreshOverlay.propTypes = {
  onRefresh: PropTypes.func.isRequired,
};