import { Box } from '../atoms/box.js'
import { Time } from '../atoms/time.js'
import { PromoText } from '../molecules/promo-text.js'
import { ValidationError } from '../routing/error-handler.js'
import h from '../shared/h.js'

export function DateEntry ({ _model, _variant, ...props }) {
  const { date, title } = _model
  if (!date || !title) {
    throw new ValidationError()
  }

  return h('div', { ...props, className: 'bg-bga text-txa border-txa/20 flex rounded-2xl' },
    h(Box, {
      className: 'relative grow-0 shrink-0 w-36 p-6',
      children: h(Time, { _time: date }),
      _style: id => {
        const styles = []
        // Vertical linke
        styles.push(`
          ${id}::before {
            content: '';
            box-sizing: border-box;
            position: absolute;
            width: 1px;
            height: calc(100% + 20px); /* Extend by the gap size. */
            border-right: 1px dashed hsl(var(--color-txa));
            top: 0px;
            right: 0px;
        }`)

        // Timeline dot.
        _variant === 'timeline' && styles.push(`
          ${id}::after {
            content: '';
            box-sizing: border-box;
            position: absolute;
            width: 17px;
            height: 17px;
            border: 3px solid hsl(var(--color-bga));
            background-color: hsl(var(--color-txa));
            box-shadow: 0 0 0 1px hsl(var(--color-txa));
            border-radius: 100%;
            top: 27px;
            right: -8px;
          }`)

        return styles.join('')
      }
    }),
    h('div', {
      className: 'grow',
      children: h(PromoText, { _model: { ..._model, date: null } })
    })
  )
}
