const GRID_COLUMNS = 4;

export const PENDING_EDIT_BORDER = '#e11d48';
export const EDITING_TILE_BORDER = '#94a3b8';

function clampWide(wide) {
  return Math.min(Math.max(wide, 1), 3);
}

export function responsiveColumnSpan(wide) {
  const span = clampWide(wide);
  return {
    xs: '1 / -1',
    sm: span >= 2 ? 'span 2' : 'span 1',
    md: `span ${span}`,
  };
}

export const PENDING_EDIT_RING_PX = 4;
export const TILE_ACTION_PADDING = 0;

export const tileActionSx = {
  position: 'absolute',
  top: 4,
  color: 'text.secondary',
};

export const tileActionIconSx = {
  fontSize: 28,
};

export const PANEL_TILE_BORDER_RADIUS = 4;

function tileRingBoxShadow(ringColor, elevationShadow) {
  const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
  return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
}

export function panelTilePaperSx({
  wide,
  sx,
  minHeight = 120,
  editing = false,
  pending = false,
  color,
  theme,
}) {
  const elevationShadow = theme?.shadows?.[4];
  const ringColor = pending
    ? PENDING_EDIT_BORDER
    : editing
      ? EDITING_TILE_BORDER
      : null;

  return {
    gridColumn: responsiveColumnSpan(wide),
    position: 'relative',
    p: 2,
    minHeight,
    display: 'flex',
    flexDirection: 'column',
    border: 'none',
    borderRadius: PANEL_TILE_BORDER_RADIUS,
    ...(color ? { bgcolor: color } : {}),
    ...(ringColor
      ? {
          boxShadow: tileRingBoxShadow(ringColor, elevationShadow),
        }
      : {}),
    ...sx,
  };
}

export { GRID_COLUMNS };