"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

import { notFound } from "@/server/errors/next"

import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
import Summary from "@/components/HotelReservation/SelectRate/Summary"
import Button from "@/components/TempDesignSystem/Button"

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

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

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

type Step = keyof typeof StepEnum

function isValidStep(step: string): step is Step {
  return Object.keys(StepEnum).includes(step)
}

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

  if (!isValidStep(activeStep)) {
    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["select-bed"]:
    // return <div>Select BED</div>
  }

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

  return (
    <main className={styles.page}>
      <div className={styles.content}>
        <section className={styles.section}>
          <SectionAccordion
            header="Select bed"
            isCompleted={true}
            isOpen={activeStep === StepEnum["select-bed"]}
            label={intl.formatMessage({ id: "Request bedtype" })}
            path="/select-bed"
          >
            <div className={styles.form}>
              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
              cskdfaen
              <Button onClick={() => onNav("breakfast")}>
                Go to breakfast!
              </Button>
            </div>
          </SectionAccordion>
          <SectionAccordion
            header="Food options"
            isCompleted={true}
            isOpen={activeStep === StepEnum.breakfast}
            label={intl.formatMessage({ id: "Select breakfast options" })}
            path="/breakfast"
          >
            <div className={styles.form}>
              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
              cskdfaen
              <Button onClick={() => onNav("details")}>Go to details!</Button>
            </div>
          </SectionAccordion>
          <SectionAccordion
            header="Details"
            isCompleted={false}
            isOpen={activeStep === StepEnum.details}
            label={intl.formatMessage({ id: "Enter your details" })}
            path="/details"
          >
            <div className={styles.form}>
              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
              cskdfaen
              <Button onClick={() => onNav("payment")}>Go to payment!</Button>
            </div>
          </SectionAccordion>
          <SectionAccordion
            header="Payment"
            isCompleted={false}
            isOpen={activeStep === StepEnum.payment}
            label={intl.formatMessage({ id: "Select payment method" })}
            path="/hotelreservation/select-bed"
          >
            <div className={styles.form}>
              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
              cskdfaen Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw
              aoiwube cskdfaen Hejhej lorem ipsim heheheheh andi fpok veoi
              cdfionaw aoiwube cskdfaen Hejhej lorem ipsim heheheheh andi fpok
              veoi cdfionaw aoiwube cskdfaen v Hejhej lorem ipsim heheheheh andi
              fpok veoi cdfionaw aoiwube cskdfaen Hejhej lorem ipsim heheheheh
              andi fpok veoi cdfionaw aoiwube cskdfaen
              <Button onClick={() => onNav("select-bed")}>Go to beds!</Button>
            </div>
          </SectionAccordion>
        </section>
        <aside className={styles.summary}>
          <Summary />
        </aside>
      </div>
    </main>
  )
}