"use client"

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

import JsonToHtml from "@/components/JsonToHtml"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

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

import type { AccordionProps } from "@/types/components/blocks/Accordion"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"

export default function AccordionSection({ accordion, title }: AccordionProps) {
  const intl = useIntl()

  const showToggleButton = accordion.length > 5
  const [allAccordionsVisible, setAllAccordionsVisible] =
    useState(!showToggleButton)

  function toggleAccordions() {
    setAllAccordionsVisible((state) => !state)
  }

  return (
    <SectionContainer id={HotelHashValues.faq}>
      <SectionHeader textTransform="uppercase" title={title} />
      <Accordion
        className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
        theme="light"
        variant="card"
      >
        {accordion.map((acc) => (
          <AccordionItem key={acc.question} title={acc.question}>
            <JsonToHtml
              embeds={acc.answer.embedded_itemsConnection.edges}
              nodes={acc.answer.json?.children[0].children}
            />
          </AccordionItem>
        ))}
      </Accordion>

      {showToggleButton ? (
        <ShowMoreButton
          loadMoreData={toggleAccordions}
          showLess={allAccordionsVisible}
          textShowMore={intl.formatMessage({
            id: "See all FAQ",
          })}
          textShowLess={intl.formatMessage({
            id: "See less FAQ",
          })}
        />
      ) : null}
    </SectionContainer>
  )
}