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 HotelSorterProps,
  type SortItem,
  SortOrder,
} from "@/types/components/hotelReservation/selectHotel/hotelSorter"

export const DEFAULT_SORT = SortOrder.Distance

export default function HotelSorter({ discreet }: HotelSorterProps) {
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const intl = 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]
  )
  const sortItems: SortItem[] = [
    {
      label: intl.formatMessage({ id: "Distance to city center" }),
      value: SortOrder.Distance,
    },
    { label: intl.formatMessage({ id: "Name" }), value: SortOrder.Name },
    { label: intl.formatMessage({ id: "Price" }), value: SortOrder.Price },
    {
      label: intl.formatMessage({ id: "TripAdvisor rating" }),
      value: SortOrder.TripAdvisorRating,
    },
  ]

  return (
    <Select
      items={sortItems}
      defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
      label={intl.formatMessage({ id: "Sort by" })}
      aria-label={intl.formatMessage({ id: "Sort by" })}
      name="sort"
      showRadioButton
      discreet={discreet}
      onSelect={onSelect}
    />
  )
}