"use client"
import { useState } from "react"

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"

export default function AccordionSection({ accordion, title }: AccordionProps) {
  const initialPageSize = 5
  const [pageSize, setPageSize] = useState(initialPageSize)
  const showMoreVisible = accordion.length > initialPageSize
  const showLessVisible = pageSize >= accordion.length

  function handleShowMore() {
    setPageSize(showLessVisible ? initialPageSize : accordion.length)
  }

  function getClassName(idx: number): string {
    if (showMoreVisible && idx > pageSize - 1) {
      return styles.hiddenItem
    } else if (showMoreVisible && idx == pageSize - 1) {
      return styles.lastItem
    }
    return ""
  }

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

      {showMoreVisible ? (
        <ShowMoreButton
          loadMoreData={handleShowMore}
          showLess={showLessVisible}
          textShowMore="See all FAQ"
          textShowLess="See less FAQ"
        />
      ) : null}
    </SectionContainer>
  )
}