"use client"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useRoomContext } from "@/contexts/Details/Room"

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

import type { SectionProps } from "@/types/components/hotelReservation/enterDetails/section"
import { StepEnum } from "@/types/enums/step"

export default function Section({
  children,
  header,
  label,
  step,
  disabled,
}: React.PropsWithChildren<SectionProps>) {
  const intl = useIntl()

  const {
    room: { bedType, breakfast },
  } = useRoomContext()

  const [title, setTitle] = useState(label)

  const noBreakfastTitle = intl.formatMessage({ id: "No breakfast" })
  const breakfastTitle = intl.formatMessage({ id: "Breakfast buffet" })

  useEffect(() => {
    if (step === StepEnum.selectBed && bedType) {
      setTitle(bedType.description)
    }
    // If breakfast step, check if an option has been selected
    if (step === StepEnum.breakfast && breakfast !== undefined) {
      if (breakfast === false) {
        setTitle(noBreakfastTitle)
      } else {
        setTitle(breakfastTitle)
      }
    }
  }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])

  return (
    <div
      className={`${styles.accordion} ${disabled ? styles.disabled : ""}`}
      data-step={step}
    >
      <header className={styles.header}>
        <Footnote
          className={styles.title}
          asChild
          textTransform="uppercase"
          type="label"
        >
          <h2>{header}</h2>
        </Footnote>
        <Subtitle className={styles.selection} type="two">
          {title}
        </Subtitle>
      </header>
      <div className={styles.content}>
        <div className={styles.contentWrapper}>{children}</div>
      </div>
    </div>
  )
}