import React, { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { PlusIcon } from 'lucide-react'
import { Reveal } from '../Reveal'
import { SectionHeading } from '../SectionHeading'
import { useSite } from '../../api'
import { useLang } from '../../i18n/lang'
import { AddItemButton, EditableItem } from '../../admin/Editable'

type FaqProps = {
  hideHeading?: boolean;
}

export function Faq({ hideHeading = false }: FaqProps) {
  const { faqs } = useSite()
  const { t } = useLang()
  const [open, setOpen] = useState<number | null>(0)

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">

      <div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>

        {!hideHeading && (
          <div className="lg:col-span-4">
            <SectionHeading
              title={t('fallbackFaqTitle')}
              lead={t('fallbackFaqLead')}
              headingKey="faq"
            />
          </div>
        )}

        <div className={hideHeading ? "" : "lg:col-span-8"}>
          <ul>
            {faqs.map((faq, i) => {
              const isOpen = open === i
              return (
                <Reveal key={faq.id} delay={0.04 * i}>
                  <EditableItem resource="faqs" item={faq}>
                    <li className="border-b border-ivory/10">
                      <button
                        type="button"
                        onClick={() => setOpen(isOpen ? null : i)}
                        aria-expanded={isOpen}
                        className="flex w-full items-center justify-between gap-6 py-6 text-start transition-colors duration-200 ease-lux hover:text-copper"
                      >
                        <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
                          {faq.question}
                        </span>
                        <PlusIcon
                          className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
                            isOpen ? 'rotate-45' : ''
                          }`}
                        />
                      </button>
                      <AnimatePresence initial={false}>
                        {isOpen && (
                          <motion.div
                            initial={{ height: 0, opacity: 0 }}
                            animate={{ height: 'auto', opacity: 1 }}
                            exit={{ height: 0, opacity: 0 }}
                            transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
                            className="overflow-hidden"
                          >
                            <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.answer}</p>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </li>
                  </EditableItem>
                </Reveal>
              )
            })}
          </ul>
          <div className="mt-8">
            <AddItemButton resource="faqs" />
          </div>
        </div>
      </div>
    </section>
  )
}