import { ink } from './palette.ts'

export interface LegendItem {
  label: string
  color: string
  /** stroke-dasharray for a line swatch */
  dash?: string
  shape?: 'line' | 'dot' | 'cross'
  /** e.g. the max error for this series, shown after the label */
  value?: string
}

/**
 * Identity is never carried by colour alone: every series that appears in a
 * plot appears here too, and the ones the reader most needs are also labelled
 * directly on the plot.
 */
export default function Legend({
  items,
  onHover,
  active,
}: {
  items: LegendItem[]
  /** hovering an entry reports its index, so the plot can pick that curve out */
  onHover?: (k: number | null) => void
  /** the entry to show as picked out; the others are dimmed */
  active?: number | null
}) {
  return (
    <div className="legend" onPointerLeave={onHover ? () => onHover(null) : undefined}>
      {items.map((it, k) => (
        <span
          className={active != null && active !== k ? 'legend-item dim' : 'legend-item'}
          key={it.label}
          onPointerEnter={onHover ? () => onHover(k) : undefined}
          style={onHover ? { cursor: 'default' } : undefined}
        >
          <svg width={18} height={10} aria-hidden="true">
            {it.shape === 'dot' ? (
              <circle cx={9} cy={5} r={3.5} fill={it.color} stroke={ink.grid} strokeWidth={1} />
            ) : it.shape === 'cross' ? (
              <path d="M5 1 L13 9 M13 1 L5 9" stroke={it.color} strokeWidth={2} strokeLinecap="round" />
            ) : (
              <line
                x1={1}
                x2={17}
                y1={5}
                y2={5}
                stroke={it.color}
                strokeWidth={2}
                strokeDasharray={it.dash}
                strokeLinecap="round"
              />
            )}
          </svg>
          <span>{it.label}</span>
          {it.value && <span className="legend-value">{it.value}</span>}
        </span>
      ))}
    </div>
  )
}