/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./web-faqs.module.scss"
import PageIntro from "@/components/dashboard/PageIntro"
import FaqModal from "../Modals/CreateAndUpdateFaq"
import { useState } from "react"
import NoResults from "@/components/dashboard/NoResults"
import { router } from "@inertiajs/react"

interface Faq {
  id: number
  question: string
  answer: string
}

const WebsiteFaqs = ({faqs}: any) => {
  const [showModal, setShowModal] = useState(false)
  const [modalType, setModalType] = useState<"add" | "update">("add")
  const [selectedFaq, setSelectedFaq] = useState<Faq | null>(null)

  const openAddModal = () => {
    setModalType("add")
    setSelectedFaq(null)
    setShowModal(true)
  }

  const openUpdateModal = (faq: Faq) => {
    setModalType("update")
    setSelectedFaq(faq)
    setShowModal(true)
  }

  const closeModal = () => {
    setShowModal(false)
    setSelectedFaq(null)
  }

   const handleDelete = (faq: Faq) => {
    router.delete(route("faqs.destroy", faq.id), {
      preserveScroll: true,
    })
  }

  return (
    <>
      {showModal && (
        <FaqModal
          closeModal={closeModal}
          type={modalType}
          faq={selectedFaq ?? undefined}
        />
      )}

      <div className={styles["web__faqs"]}>
        <PageIntro
          title={"Frequently Asked Questions"}
          description={
            "Create, update and delete faqs that shows on the website"
          }
        />

        <button onClick={openAddModal}>Add New Faq</button>

        { faqs?.length > 0 ? <div className={styles["web__faqs__grid"]}>
          {faqs?.map((faq: any) => (
            <div
              key={faq.id}
              className={styles["web__faqs__grid--item"]}
            >
              <h5>{faq.question}</h5>
              <p>{faq.answer}</p>

              <div
                className={styles["web__faqs__grid--item--buttons"]}
              >
                <span
                  onClick={() => openUpdateModal(faq)}
                  className={
                    styles[
                      "web__faqs__grid--item--buttons--edit"
                    ]
                  }
                >
                  Update
                </span>

                <span onClick={ () => handleDelete(faq) }
                  className={
                    styles[
                      "web__faqs__grid--item--buttons--delete"
                    ]
                  }
                >
                  Delete
                </span>
              </div>
            </div>
          ))}
        </div> : <NoResults title="No Faqs" description="Ops! You are yet to add any faq item at the moment" /> }
      </div>
    </>
  )
}

export default WebsiteFaqs