"use client"

import { notFound } from "next/navigation"
import { useState } from "react"
import { useIntl } from "react-intl"

import { trpc } from "@/lib/trpc/client"

import BedType from "@/components/HotelReservation/EnterDetails/BedType"
import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
import Details from "@/components/HotelReservation/EnterDetails/Details"
import Payment from "@/components/HotelReservation/SelectRate/Payment"
import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
import LoadingSpinner from "@/components/LoadingSpinner"

import type { LangParams, PageArgs } from "@/types/params"

enum StepEnum {
  selectBed = "select-bed",
  breakfast = "breakfast",
  details = "details",
  payment = "payment",
}

function isValidStep(step: string): step is StepEnum {
  return Object.values(StepEnum).includes(step as StepEnum)
}

export default function StepPage({
  params,
}: PageArgs<LangParams & { step: StepEnum }>) {
  const { step } = params
  const [activeStep, setActiveStep] = useState<StepEnum>(step)
  const intl = useIntl()

  if (!isValidStep(activeStep)) {
    return notFound()
  }

  const { data: hotel, isLoading: loadingHotel } =
    trpc.hotel.hotelData.get.useQuery({
      hotelId: "811",
      language: params.lang,
    })

  if (loadingHotel) {
    return <LoadingSpinner />
  }

  if (!hotel) {
    // TODO: handle case with hotel missing
    return notFound()
  }

  switch (activeStep) {
    case StepEnum.breakfast:
    //return <div>Select BREAKFAST</div>
    case StepEnum.details:
    //return <div>Select DETAILS</div>
    case StepEnum.payment:
    //return <div>Select PAYMENT</div>
    case StepEnum.selectBed:
    // return <div>Select BED</div>
  }

  function onNav(step: StepEnum) {
    setActiveStep(step)
    if (typeof window !== "undefined") {
      window.history.pushState({}, "", step)
    }
  }

  return (
    <section>
      <SectionAccordion
        header="Select bed"
        isCompleted={true}
        isOpen={activeStep === StepEnum.selectBed}
        label={intl.formatMessage({ id: "Request bedtype" })}
        path="/select-bed"
      >
        <BedType />
      </SectionAccordion>
      <SectionAccordion
        header="Food options"
        isCompleted={true}
        isOpen={activeStep === StepEnum.breakfast}
        label={intl.formatMessage({ id: "Select breakfast options" })}
        path="/breakfast"
      >
        <Breakfast />
      </SectionAccordion>
      <SectionAccordion
        header="Details"
        isCompleted={false}
        isOpen={activeStep === StepEnum.details}
        label={intl.formatMessage({ id: "Enter your details" })}
        path="/details"
      >
        <Details user={null} />
      </SectionAccordion>
      <SectionAccordion
        header="Payment"
        isCompleted={false}
        isOpen={activeStep === StepEnum.payment}
        label={intl.formatMessage({ id: "Select payment method" })}
        path="/hotelreservation/select-bed"
      >
        <Payment hotel={hotel.data.attributes} />
      </SectionAccordion>
    </section>
  )
}