web/stores/enter-details.ts

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

import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
import { breakfastSchema } from "@/components/HotelReservation/EnterDetails/Breakfast/schema"
import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"

import { DetailsSchema } from "@/types/components/enterDetails/details"
import { SidePeekEnum } from "@/types/components/enterDetails/sidePeek"
import { StepEnum } from "@/types/components/enterDetails/step"
import { bedTypeEnum } from "@/types/enums/bedType"
import { breakfastEnum } from "@/types/enums/breakfast"

const SESSION_STORAGE_KEY = "enterDetails"

interface EnterDetailsState {
  data: {
    bedType: bedTypeEnum | undefined
    breakfast: breakfastEnum | undefined
  } & DetailsSchema
  steps: StepEnum[]
  currentStep: StepEnum
  activeSidePeek: SidePeekEnum | null
  isValid: Record<StepEnum, boolean>
  completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
  navigate: (
    step: StepEnum,
    updatedData?: Record<string, string | boolean>
  ) => void
  setCurrentStep: (step: StepEnum) => void
  openSidePeek: (key: SidePeekEnum | null) => void
  closeSidePeek: () => void
}

export function initEditDetailsState(currentStep: StepEnum) {
  const isBrowser = typeof window !== "undefined"
  const sessionData = isBrowser
    ? sessionStorage.getItem(SESSION_STORAGE_KEY)
    : null

  const defaultData: EnterDetailsState["data"] = {
    bedType: undefined,
    breakfast: undefined,
    countryCode: "",
    email: "",
    firstName: "",
    lastName: "",
    phoneNumber: "",
    join: false,
    zipCode: "",
    dateOfBirth: undefined,
    termsAccepted: false,
  }

  let inputData = {}
  if (sessionData) {
    inputData = JSON.parse(sessionData)
  }

  const validPaths = [StepEnum.selectBed]

  let initialData: EnterDetailsState["data"] = defaultData

  const isValid = {
    [StepEnum.selectBed]: false,
    [StepEnum.breakfast]: false,
    [StepEnum.details]: false,
    [StepEnum.payment]: false,
  }

  const validatedBedType = bedTypeSchema.safeParse(inputData)
  if (validatedBedType.success) {
    validPaths.push(StepEnum.breakfast)
    initialData = { ...initialData, ...validatedBedType.data }
    isValid[StepEnum.selectBed] = true
  }
  const validatedBreakfast = breakfastSchema.safeParse(inputData)
  if (validatedBreakfast.success) {
    validPaths.push(StepEnum.details)
    initialData = { ...initialData, ...validatedBreakfast.data }
    isValid[StepEnum.breakfast] = true
  }
  const validatedDetails = detailsSchema.safeParse(inputData)
  if (validatedDetails.success) {
    validPaths.push(StepEnum.payment)
    initialData = { ...initialData, ...validatedDetails.data }
    isValid[StepEnum.details] = true
  }

  if (!validPaths.includes(currentStep)) {
    currentStep = validPaths.pop()! // We will always have at least one valid path
    if (isBrowser) {
      window.history.pushState(
        { step: currentStep },
        "",
        currentStep + window.location.search
      )
    }
  }

  return create<EnterDetailsState>()((set, get) => ({
    data: initialData,
    steps: Object.values(StepEnum),
    setCurrentStep: (step) => set({ currentStep: step }),
    navigate: (step, updatedData) =>
      set(
        produce((state) => {
          const sessionStorage = window.sessionStorage

          const previousDataString = sessionStorage.getItem(SESSION_STORAGE_KEY)

          const previousData = JSON.parse(previousDataString || "{}")

          sessionStorage.setItem(
            SESSION_STORAGE_KEY,
            JSON.stringify({ ...previousData, ...updatedData })
          )

          state.currentStep = step
          window.history.pushState({ step }, "", step + window.location.search)
        })
      ),
    openSidePeek: (key) => set({ activeSidePeek: key }),
    closeSidePeek: () => set({ activeSidePeek: null }),
    currentStep,
    activeSidePeek: null,
    isValid,
    completeStep: (updatedData) =>
      set(
        produce((state) => {
          state.isValid[state.currentStep] = true

          const nextStep =
            state.steps[state.steps.indexOf(state.currentStep) + 1]

          state.data = { ...state.data, ...updatedData }

          state.currentStep = nextStep
          get().navigate(nextStep, updatedData)
        })
      ),
  }))
}

export type EnterDetailsStore = ReturnType<typeof initEditDetailsState>

export const EnterDetailsContext = createContext<EnterDetailsStore | null>(null)

export const useEnterDetailsStore = <T>(
  selector: (store: EnterDetailsState) => T
): T => {
  const enterDetailsContextStore = useContext(EnterDetailsContext)

  if (!enterDetailsContextStore) {
    throw new Error(
      `useEnterDetailsStore must be used within EnterDetailsContextProvider`
    )
  }

  return useStore(enterDetailsContextStore, selector)
}