web/packages/booking-flow/lib/hooks/useSearchHistory.ts

import { useCallback, useEffect, useState } from "react"

import { logger } from "@scandic-hotels/common/logger"
import {
  type AutoCompleteLocation,
  autoCompleteLocationSchema,
} from "@scandic-hotels/trpc/routers/autocomplete/schema"

import useLang from "./useLang"

export function useSearchHistory() {
  const MAX_HISTORY_LENGTH = 5
  const KEY = useSearchHistoryKey()

  const getHistoryFromLocalStorage = useCallback((): AutoCompleteLocation[] => {
    const stringifiedHistory = window.localStorage?.getItem(KEY)

    try {
      const parsedHistory = JSON.parse(stringifiedHistory ?? "[]")
      if (!Array.isArray(parsedHistory)) {
        throw new Error("Invalid search history format")
      }
      const existingHistory = parsedHistory.map((item) =>
        autoCompleteLocationSchema.parse(item)
      )

      return existingHistory
    } catch (error) {
      logger.error("Failed to parse search history:", error)
      window.localStorage?.removeItem(KEY)

      return []
    }
  }, [KEY])

  function updateSearchHistory(newItem: AutoCompleteLocation) {
    const existingHistory = getHistoryFromLocalStorage()
    if (!autoCompleteLocationSchema.safeParse(newItem).success) {
      return existingHistory
    }

    const oldSearchHistoryWithoutTheNew = existingHistory.filter(
      (h) => h.type !== newItem.type || h.id !== newItem.id
    )

    const updatedSearchHistory = [
      newItem,
      ...oldSearchHistoryWithoutTheNew.slice(0, MAX_HISTORY_LENGTH - 1),
    ]

    window.localStorage?.setItem(KEY, JSON.stringify(updatedSearchHistory))

    return updatedSearchHistory
  }

  const [searchHistory, setSearchHistory] = useState<AutoCompleteLocation[]>([])

  useEffect(() => {
    setSearchHistory(getHistoryFromLocalStorage())
  }, [KEY, getHistoryFromLocalStorage])

  function clearHistory() {
    window.localStorage?.removeItem(KEY)

    setSearchHistory([])
  }

  function insertSearchHistoryItem(
    newItem: AutoCompleteLocation
  ): AutoCompleteLocation[] {
    const updatedHistory = updateSearchHistory(newItem)
    setSearchHistory(updatedHistory)

    return updatedHistory
  }

  return {
    searchHistory,
    insertSearchHistoryItem,
    clearHistory,
  }
}

function useSearchHistoryKey() {
  const SEARCH_HISTORY_LOCALSTORAGE_KEY = "searchHistory"
  const lang = useLang()

  return `${SEARCH_HISTORY_LOCALSTORAGE_KEY}-${lang}`.toLowerCase()
}