import type { SxProps, Theme } from '@mui/material'
import { LEGEND_GROUP_HEADER_HEIGHT } from '../legend-group/styles'

export const styles = {
  // Absolute handle, flush against the header's top-left corner — no flex
  // slot; sticky header is the containing block.
  handleSlot: {
    position: 'absolute',
    zIndex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    left: 0,
    top: 0,
  },
  // Both headers center their title on the same 24px band from the header's
  // top edge (group: 48px header, `alignItems:'center'`; row: 12px top
  // padding + 24px `titleLine`, `alignItems:'flex-start'`) — so `height:48`
  // centers the icon on the title in both cases, even though the row's own
  // header is only 32px tall (a 32px-tall slot would center at 16px, 8px
  // short of the title).
  handleSlotLayer: {
    height: LEGEND_GROUP_HEADER_HEIGHT,
  },
  handleSlotGroup: {
    height: LEGEND_GROUP_HEADER_HEIGHT,
  },
  handle: {
    padding: '2px',
    cursor: 'grab',
    touchAction: 'none',
    color: 'text.secondary',
    '& .MuiSvgIcon-root': {
      fontSize: 18,
    },
    '&:active': {
      cursor: 'grabbing',
    },
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
  overlay: {
    display: 'flex',
    alignItems: 'center',
    gap: 1,
    padding: ({ spacing }) => spacing(1, 1.5),
    backgroundColor: 'background.paper',
    borderRadius: 1,
    boxShadow: 4,
    height: 'auto',
    maxWidth: '100%',
    overflow: 'hidden',
  },
  overlayIcon: {
    display: 'flex',
    color: 'text.secondary',
  },
  overlayLabel: {
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
} satisfies Record<string, SxProps<Theme>>