import { Fragment, ReactNode, useEffect, useRef, useState } from 'react'

import { useBreakpoint } from '@/lib/hooks'
import { CategoryContent } from '@/lib/types'

import Accordion from '@/components/shared/Accordion'
import ParseContent from '@/components/parsers/ParseContent'

export default function GlossaryRightPanel({
  pageCategories,
  content,
  index,
  collapsableOnMobileView = false,
}: {
  pageCategories: CategoryContent[]
  content: string
  index: ReactNode
  collapsableOnMobileView?: boolean
}) {
  const { isMobile } = useBreakpoint()

  return (
    <>
      {content && <ParseContent content={content} replaceOptions={{ p: { textClass: 'text-section-intro' } }} />}
      <div className="md:hidden">{!collapsableOnMobileView && index}</div>

      {pageCategories.map((pageCategory, index) => {
        if (pageCategory.categoryItems && (!isMobile || !collapsableOnMobileView)) {
          return (
            <Fragment key={index}>
              <CategoryContent pageCategory={pageCategory} index={index} />
            </Fragment>
          )
        }
      })}
      <Accordion initial="">
        {pageCategories.map((pageCategory, index) => {
          if (pageCategory.categoryItems && isMobile && collapsableOnMobileView) {
            return (
              <Accordion.Item key={index}>
                <Accordion.Collapsed id={pageCategory.categoryName.replace(/[^A-Z0-9]+/gi, '_')}>
                  {pageCategory.categoryName}
                </Accordion.Collapsed>
                <Accordion.Expanded>
                  {pageCategory.categoryItems.map((categoryItem, categoryIndex) => {
                    return (
                      <CategoryItemContent
                        key={categoryIndex}
                        categoryItem={categoryItem}
                        categoryIndex={categoryIndex}
                      />
                    )
                  })}
                </Accordion.Expanded>
                <CategoryContentMobile key={index} pageCategory={pageCategory} index={index} />
              </Accordion.Item>
            )
          }
        })}
      </Accordion>
    </>
  )
}

function CategoryContent({ pageCategory, index }: { pageCategory: CategoryContent; index: number }) {
  return (
    <div key={index} id={pageCategory.categoryName}>
      <h2 className="text-h2 pb-6">{pageCategory.categoryName}</h2>
      <div className="flex flex-col gap-4">
        {pageCategory.categoryItems.map((categoryItem, categoryIndex) => {
          return (
            <Fragment key={categoryIndex}>
              <CategoryItemContent categoryItem={categoryItem} categoryIndex={categoryIndex} />
            </Fragment>
          )
        })}
        <hr className="border-black border-2 my-[100px]" />
      </div>
    </div>
  )
}

function CategoryContentMobile({ pageCategory, index }: { pageCategory: CategoryContent; index: number }) {
  let ref = useRef<HTMLDivElement>(null)
  const [openDropdown, setOpenDropdown] = useState(false)
  const activeClass = openDropdown ? 'active' : ''

  useEffect(() => {
    const handler = (e: any) => {
      if (openDropdown && ref.current && !ref.current.contains(e.target)) {
        setOpenDropdown(false)
      }
    }
    document.addEventListener('mousedown', handler)
    document.addEventListener('touchstart', handler)
    return () => {
      document.removeEventListener('mousedown', handler)
      document.removeEventListener('touchstart', handler)
    }
  }, [openDropdown])

  return (
    <div className="content-list" ref={ref} key={index} id={pageCategory.categoryName}>
      <button
        className={`content-list-section ${activeClass} text-left leading-none`}
        type="button"
        aria-haspopup="menu"
        aria-expanded={openDropdown}
        onClick={() => {
          setOpenDropdown(prev => !prev)
        }}
      >
        <h2 className="text-h2">{pageCategory.categoryName}</h2>
        <span aria-hidden className={`${activeClass} icon-plus`}></span>
      </button>
      <Dropdown pageCategory={pageCategory} openDropdown={openDropdown} />
      <hr className="border-black border-2" />
    </div>
  )
}

function Dropdown({ pageCategory, openDropdown }: { pageCategory: CategoryContent; openDropdown: boolean }) {
  return (
    <div className={`content-dropdown ${openDropdown ? 'active' : ''}`}>
      <div>
        {pageCategory.categoryItems.map((categoryItem, categoryIndex) => {
          return <CategoryItemContent key={categoryIndex} categoryItem={categoryItem} categoryIndex={categoryIndex} />
        })}
      </div>
    </div>
  )
}

function CategoryItemContent({
  categoryItem,
  categoryIndex,
}: {
  categoryItem: {
    itemTopic: string
    itemDescription: string
  }
  categoryIndex: number
}) {
  return (
    <div key={categoryIndex}>
      <h3 className="text-h5 font-medium mb-2 mt-8">{categoryItem.itemTopic}</h3>
      <ParseContent
        content={categoryItem.itemDescription}
        replaceOptions={{ p: { textClass: 'text-body', className: 'pb-2' } }}
      />
    </div>
  )
}