import { Component, createRef } from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
import { injectMuiTheme } from './injectMuiTheme';
import {
  GRID_COLUMNS,
  TILE_ACTION_PADDING,
  panelTilePaperSx,
  tileActionIconSx,
  tileActionSx,
} from './panelTileLayout';

class PanelTileBase extends Component {
  renderTitle() {
    const { title, action } = this.props;
    if (!title) return null;
    return (
      <Typography
        variant="overline"
        color="text.secondary"
        sx={{ display: 'block', mb: 1, pr: action ? 9 : 0 }}
      >
        {title}
      </Typography>
    );
  }

  renderAction() {
    const { action } = this.props;
    if (!action) return null;

    const { label, icon: Icon, onClick, busy } = action;

    return (
      <>
        <IconButton
          disabled
          aria-hidden
          tabIndex={-1}
          sx={{
            ...tileActionSx,
            right: 48,
            visibility: 'hidden',
            pointerEvents: 'none',
          }}
        >
          <SaveOutlinedIcon sx={tileActionIconSx} />
        </IconButton>
        <IconButton
          type="button"
          onClick={onClick}
          aria-label={label}
          disabled={busy}
          sx={{ ...tileActionSx, right: 4 }}
        >
          {busy ? (
            <CircularProgress size={22} color="inherit" />
          ) : (
            <Icon sx={tileActionIconSx} />
          )}
        </IconButton>
      </>
    );
  }

  render() {
    const {
      theme,
      wide = 1,
      children,
      sx,
      minHeight = 120,
      tileKey,
      action,
      elevation = 4,
    } = this.props;
    const actionPadding = action ? TILE_ACTION_PADDING : 0;

    return (
      <Paper
        elevation={elevation}
        sx={panelTilePaperSx({
          wide,
          sx,
          minHeight,
          tileKey,
          theme,
        })}
      >
        {this.renderAction()}
        {this.renderTitle()}
        <Box sx={{ flex: 1, minWidth: 0, pr: actionPadding }}>{children}</Box>
      </Paper>
    );
  }
}

export const PanelTile = injectMuiTheme(PanelTileBase);

export function PanelTileGrid({ children, sx }) {
  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: {
          xs: '1fr',
          sm: 'repeat(2, 1fr)',
          md: `repeat(${GRID_COLUMNS}, 1fr)`,
        },
        gap: 2,
        ...sx,
      }}
    >
      {children}
    </Box>
  );
}

export { GRID_COLUMNS };