FAQ.tsx

import React, { useState } from 'react'
import GenericExpansionPanel from 'components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel'
import FAQJSon from 'db/FAQ.json'

const decoreText = (line: string) => {
  if (line === ' ') {
    return <span className="spaceline">{line}</span>
  } else if (line.includes('<b>')) {
    const indexStart = line.indexOf('<b>')
    const indexEnd = line.indexOf('</b>')
    return (
      <>
        {line.substring(0, indexStart)}
        <span className="text-bold">
          {line.substring(indexStart + 3, indexEnd)}
        </span>
        {line.substring(indexEnd + 4, line.length)}
      </>
    )
  } else if (line.includes('<u>')) {
    const indexStart = line.indexOf('<u>')
    const indexEnd = line.indexOf('</u>')
    return (
      <>
        {line.substring(0, indexStart)}
        <span className="text-underline">
          {line.substring(indexStart + 3, indexEnd)}
        </span>
        {line.substring(indexEnd + 4, line.length)}
      </>
    )
  } else if (line.includes('<a>')) {
    const indexStart = line.indexOf('<a>')
    const indexEnd = line.indexOf('</a>')
    return (
      <>
        {line.substring(0, indexStart)}
        <a
          href={line.substring(indexStart + 3, indexEnd)}
          target="_blank"
          rel="noopener noreferrer"
        >
          {line.substring(indexStart + 3, indexEnd)}
        </a>

        {line.substring(indexEnd + 4, line.length)}
      </>
    )
  } else {
    return line
  }
}

const formatDetails = (details: Array<string>) => {
  const formatedDetails: React.ReactNode[] = []
  details.forEach((detail, index) => {
    formatedDetails.push(
      <div key={index} className="faq-content-detail">
        {decoreText(detail)}
      </div>
    )
  })
  return formatedDetails
}

const FAQ = () => {
  const [expandedPanel, setExpandedPanel] = useState<string | false>(false)

  const handleChange = (panel: string) => (
    event: React.ChangeEvent<{}>,
    isExpanded: boolean
  ) => {
    setExpandedPanel(isExpanded ? panel : false)
  }

  return (
    <div className="faq-view-root">
      <div className="faq-view-content">
        {FAQJSon.map((question, index) => {
          return (
            <GenericExpansionPanel
              key={index}
              summary={question.summary}
              details={formatDetails(question.details)}
              expanded={expandedPanel === `panel${index}`}
              onChange={handleChange(`panel${index}`)}
            />
          )
        })}
      </div>
    </div>
  )
}

export default FAQ