web/apps/scandic-web/stores/hotel-listing-data/index.ts

import { produce } from "immer"
import { useContext } from "react"
import { create, useStore } from "zustand"

import { HotelListingDataContext } from "@/contexts/HotelListingData"
import {
  trackFilterChangeEvent,
  trackSortingChangeEvent,
} from "@/utils/tracking/destinationPage"

import {
  getFilteredHotels,
  getFiltersWithHotelCount,
  getSortedHotels,
  isValidSortOption,
} from "./helper"

import type { HotelFilter } from "@scandic-hotels/trpc/routers/hotels/filters/output"

import type {
  HotelListingDataState,
  InitialState,
} from "@/types/stores/hotel-listing-data"

export function createHotelListingDataStore({
  allHotels,
  allFilters,
  sortItems,
  searchParams,
}: InitialState) {
  const defaultSort =
    sortItems.find((s) => s.isDefault)?.value ?? sortItems[0].value
  const allFlattenedFilters = Object.values(allFilters).flat()
  const allFilterSlugs = allFlattenedFilters.map((filter) => filter.slug)

  const activeFilters: HotelFilter[] = []

  let activeSort = defaultSort
  if (searchParams) {
    const sortParam = searchParams.get("sort")
    const filterParam = searchParams.get("filter")

    if (sortParam && isValidSortOption(sortParam, sortItems)) {
      activeSort = sortParam
    }

    if (filterParam) {
      const filters = filterParam.split(",")
      filters.forEach((filter) => {
        const filterFromUrl = allFlattenedFilters.find((f) => f.slug === filter)
        if (filterFromUrl) {
          activeFilters.push(filterFromUrl)
        }
      })
    }
  }
  const filteredHotels = getFilteredHotels(allHotels, activeFilters)
  const activeHotels = getSortedHotels(filteredHotels, activeSort)

  const filtersWithCount = getFiltersWithHotelCount(allFilters, filteredHotels)

  return create<HotelListingDataState>((set) => ({
    actions: {
      updateActiveFiltersAndSort(filterSlugs, sort) {
        return set(
          produce((state: HotelListingDataState) => {
            const newSort =
              sort && isValidSortOption(sort, state.sortItems)
                ? sort
                : state.defaultSort
            const filters = allFlattenedFilters.filter((filter) =>
              filterSlugs.includes(filter.slug)
            )
            const filteredHotels = getFilteredHotels(state.allHotels, filters)
            const sortedHotels = getSortedHotels(filteredHotels, newSort)

            // Tracking
            if (newSort !== state.activeSort) {
              trackSortingChangeEvent(newSort)
            }
            if (
              JSON.stringify(filters) !== JSON.stringify(state.activeFilters)
            ) {
              const facilityFiltersUsed = filters
                .filter(
                  (f) =>
                    !!state.allFilters.facilityFilters.find(
                      (ff) => ff.id === f.id
                    )
                )
                .map((f) => f.slug)
              const surroundingsFiltersUsed = filters
                .filter(
                  (f) =>
                    !!state.allFilters.surroundingsFilters.find(
                      (sf) => sf.id === f.id
                    )
                )
                .map((f) => f.slug)

              trackFilterChangeEvent(
                facilityFiltersUsed,
                surroundingsFiltersUsed
              )
            }

            state.activeSort = newSort
            state.activeFilters = filters
            state.activeHotels = sortedHotels

            state.pendingFilters = filters
            state.pendingSort = newSort
            state.pendingHotelCount = filteredHotels.length
            state.isLoading = false
          })
        )
      },
      setIsLoading(isLoading) {
        return set(
          produce((state: HotelListingDataState) => {
            state.isLoading = isLoading
          })
        )
      },
      setPendingSort(sort) {
        return set(
          produce((state: HotelListingDataState) => {
            state.pendingSort = sort
          })
        )
      },
      togglePendingFilter(filter) {
        return set(
          produce((state: HotelListingDataState) => {
            const filterId = filter.id
            const isActive = !!state.pendingFilters.find(
              (pf) => pf.id === filterId
            )
            const filters = isActive
              ? state.pendingFilters.filter((pf) => pf.id !== filterId)
              : [...state.pendingFilters, filter]
            const pendingHotels = getFilteredHotels(state.allHotels, filters)

            const pendingFiltersWithCount = getFiltersWithHotelCount(
              state.allFilters,
              pendingHotels
            )

            state.pendingFilters = filters
            state.pendingHotelCount = pendingHotels.length
            state.filtersWithCount = pendingFiltersWithCount
          })
        )
      },
      clearPendingFilters() {
        return set(
          produce((state: HotelListingDataState) => {
            state.pendingFilters = []
            state.pendingHotelCount = state.allHotels.length
            state.filtersWithCount = getFiltersWithHotelCount(
              state.allFilters,
              state.allHotels
            )
          })
        )
      },
      resetPendingValues() {
        return set(
          produce((state: HotelListingDataState) => {
            state.pendingFilters = state.activeFilters
            state.pendingSort = state.activeSort
            state.pendingHotelCount = state.activeHotels.length
            state.filtersWithCount = getFiltersWithHotelCount(
              state.allFilters,
              state.activeHotels
            )
          })
        )
      },
    },
    allHotels,
    activeHotels: activeHotels,
    pendingHotelCount: activeHotels.length,
    activeSort,
    pendingSort: activeSort,
    defaultSort,
    activeFilters,
    pendingFilters: activeFilters,
    allFilters,
    filtersWithCount,
    allFilterSlugs,
    sortItems,
    isLoading: false,
  }))
}

export function useHotelListingDataStore<T>(
  selector: (store: HotelListingDataState) => T
) {
  const store = useContext(HotelListingDataContext)

  if (!store) {
    throw new Error(
      "useHotelListingDataStore must be used within HotelListingDataProvider"
    )
  }

  return useStore(store, selector)
}