import { createFileRoute, useNavigate } from "@tanstack/react-router"

import { RunsScreen, type RunsSearch } from "@/components/Runs/RunsScreen"

/** A string search param, or nothing when it is absent or empty. */
const text = (value: unknown) =>
  typeof value === "string" && value ? value : undefined

export const Route = createFileRoute("/_layout/runs/")({
  component: Runs,
  // The whole state of this screen — which flow, which sweep, which runs are
  // being compared — is the address, so a comparison is something to send
  // rather than something to describe.
  validateSearch: (search: Record<string, unknown>): RunsSearch => ({
    flow: text(search.flow),
    status: text(search.status),
    group: text(search.group),
    compare: text(search.compare),
    metric: text(search.metric),
  }),
  head: () => ({ meta: [{ title: "Runs - Fluksio" }] }),
})

function Runs() {
  const search = Route.useSearch()
  const navigate = useNavigate()

  return (
    <RunsScreen
      search={search}
      update={(next) =>
        navigate({ to: "/runs", search: { ...search, ...next } })
      }
    />
  )
}