import { define } from '@because/forge'
import { theme } from '../themes'

export const LogsContainer = define('LogsContainer', {
  background: theme('colors-bgSubtle'),
  borderRadius: theme('radius-md'),
  padding: 12,
  fontFamily: theme('fonts-mono'),
  fontSize: 12,
  color: theme('colors-textMuted'),
  maxHeight: 200,
  overflow: 'auto',
  variants: {
    narrow: {
      padding: 8,
    },
  },

  render({ props: { children, id }, parts: { Root } }) {
    return <Root id={id} ref={(el: HTMLElement | null) => {
      if (el) requestAnimationFrame(() => el.scrollTop = el.scrollHeight)
    }}>{children}</Root>
  }
})

export const LogLine = define('LogLine', {
  marginBottom: 4,
  selectors: {
    '&:last-child': { marginBottom: 0 },
  },
})

export const LogTime = define('LogTime', {
  color: theme('colors-textFaintest'),
  marginRight: 12,
  display: 'inline',
})