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 styles from "./hotelSorter.module.css"

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

export const DEFAULT_SORT = SortOrder.Distance

export default function HotelSorter() {
  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 centre" }),
      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 (
    <div className={styles.container}>
      <Select
        items={sortItems}
        defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
        label={intl.formatMessage({ id: "Sort by" })}
        name="sort"
        showRadioButton
        discreet
        onSelect={onSelect}
      />
    </div>
  )
}