import type { SxProps, Theme } from '@mui/material'
import type { CSSProperties } from 'react'

export const styles = {
  container: {
    display: 'flex',
    alignItems: 'center',
    gap: ({ spacing }) => spacing(0.25),
  },
  trigger: {
    '&[data-active="true"]': {
      background: (theme: Theme) => theme.palette.primary.relatedLight,
    },
  },
} satisfies Record<string, SxProps<Theme>>

/**
 * Plain CSS objects for the brush overlay — we're outside MUI's sx pipeline
 * here because the rectangles are rendered via a React portal into the chart
 * div (not part of the MUI tree). Colors borrow from the base palette; if
 * theme-aware styling is needed later, move to styled components.
 */
export const overlayStyles: Record<string, CSSProperties> = {
  // `top` and `height` are filled in at render time from the chart's plot
  // rect so rectangles don't bleed over the legend / axis labels.
  //
  // Colors track ECharts 6's `backgroundTint` token (used by the default
  // brush) — a barely-visible pale blue-gray translucent fill that washes
  // bars underneath rather than masking them. Border is a hairline dark
  // alpha so the selection edges are just findable, not prominent.
  rect: {
    position: 'absolute',
    background: 'rgba(234, 237, 245, 0.2)',
    border: '1px dashed rgba(0, 0, 0, 0.15)',
    pointerEvents: 'none',
  },
  // Live drag preview — identical to committed rect (no "in-progress" vs
  // "committed" visual distinction; the preview just disappears on
  // `pointerup` as the rect takes its place).
  rectPreview: {
    position: 'absolute',
    background: 'rgba(234, 237, 245, 0.6)',
    border: '1px dashed rgba(0, 0, 0, 0.15)',
    pointerEvents: 'none',
  },
}