"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 HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
import Payment from "@/components/HotelReservation/SelectRate/Payment"
import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
import Summary from "@/components/HotelReservation/SelectRate/Summary"
import LoadingSpinner from "@/components/LoadingSpinner"

import styles from "./page.module.css"

import { 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 (
    <main className={styles.page}>
      <HotelSelectionHeader hotel={hotel.data.attributes} />
      <div className={styles.content}>
        <section className={styles.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>
        <aside className={styles.summary}>
          <Summary />
        </aside>
      </div>
    </main>
  )
}
