web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx

"use client"

import { usePathname, useSearchParams } from "next/navigation"
import { useCallback } from "react"
import { useIntl } from "react-intl"

import Select from "@/components/TempDesignSystem/Select"

import {
  type SortItem,
  SortOrder,
} from "@/types/components/hotelReservation/selectHotel/hotelSorter"

const sortItems: SortItem[] = [
  { label: "Distance", value: SortOrder.Distance },
  { label: "Name", value: SortOrder.Name },
  { label: "Price", value: SortOrder.Price },
  { label: "TripAdvisor rating", value: SortOrder.TripAdvisorRating },
]

export const DEFAULT_SORT = SortOrder.Distance

export default function HotelSorter() {
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const i18n = useIntl()

  const onSelect = useCallback(
    (value: string | number) => {
      const newSort = value.toString()
      if (newSort === searchParams.get("sort")) {
        return
      }

      const newSearchParams = new URLSearchParams(searchParams)
      newSearchParams.set("sort", newSort)

      window.history.replaceState(
        null,
        "",
        `${pathname}?${newSearchParams.toString()}`
      )
    },
    [pathname, searchParams]
  )

  return (
    <Select
      items={sortItems}
      label={i18n.formatMessage({ id: "Sort by" })}
      name="sort"
      showRadioButton
      onSelect={onSelect}
    />
  )
}