// ── "This wipe" or "All time" ─────────────────────────────────────────────
//
// One control, used by two panels, because the wipe is a property of the PAGE
// rather than of the feed or the leaderboard — a reader who has chosen last
// month's map means it for both, and two selects that could disagree is a page
// that shows one wipe's kills next to another's leaderboard.
//
// It loads the wipe list itself. That is a second request for the same list the
// Wipes tab fetches, and it is the right trade: the alternative is the page
// fetching it on mount for a control most visitors never touch, on every visit,
// for every server.

import { useAsync } from '../core.js'
import { day } from '../lib/format.js'
import api from '../api.js'

/** The value that means "no wipe filter at all". Never the empty string — see `api.js`'s `query`. */
export const ALL_TIME = 'all'

export default function WipeSelect({ serverId, value, onChange, currentWipeId }) {
  const { data } = useAsync(() => api.servers.wipes(serverId), [serverId])
  const wipes = data ? data.wipes : []

  // A server with one wipe has nothing to choose between, so the control is not
  // offered. "All time" and "this wipe" are the same answer there, and a select
  // with one real option is furniture that invites a question with no answer.
  if (wipes.length < 2) return null

  return (
    <label className="sans" style={{ color: 'var(--dim)', fontSize: '0.78rem' }}>
      Wipe{' '}
      <select
        value={value || ALL_TIME}
        onChange={(event) => onChange(event.target.value)}
        style={{
          background: 'var(--panel-flat, transparent)',
          color: 'var(--text)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--radius-input, 6px)',
          padding: '3px 8px',
          fontSize: '0.78rem',
        }}
      >
        <option value={ALL_TIME}>All time</option>
        {wipes.map((wipe) => (
          <option key={wipe.wipeId} value={wipe.wipeId}>
            {day(wipe.saveCreatedAt || wipe.firstSeen)}
            {wipe.wipeId === currentWipeId ? ' (current)' : ''}
          </option>
        ))}
      </select>
    </label>
  )
}