"use client"

import { useEnterDetailsStore } from "@/stores/enter-details"

import { RoomContext } from "@/contexts/Details/Room"

import type { RoomProviderProps } from "@/types/providers/details/room"

export default function RoomProvider({ children, idx }: RoomProviderProps) {
  const actions = useEnterDetailsStore((state) => ({
    setStep: state.actions.setStep(idx),
    updateBedType: state.actions.updateBedType(idx),
    updateBreakfast: state.actions.updateBreakfast(idx),
    updateDetails: state.actions.updateDetails(idx),
  }))
  const { activeRoom, currentStep, isComplete, room, steps } =
    useEnterDetailsStore((state) => ({
      activeRoom: state.activeRoom,
      currentStep: state.rooms[idx].currentStep,
      isComplete: state.rooms[idx].isComplete,
      room: state.rooms[idx].room,
      steps: state.rooms[idx].steps,
    }))
  return (
    <RoomContext.Provider
      value={{
        actions,
        currentStep,
        isComplete,
        isActiveRoom: activeRoom === idx,
        room,
        roomNr: idx + 1,
        steps,
      }}
    >
      {children}
    </RoomContext.Provider>
  )
}
