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

interface Testimonial {
  id: number
  name: string
  role: string
  testimony: string
}

const WebsiteTestimonials = ({testimonials}: any) => {
  const [showModal, setShowModal] = useState(false)
  const [modalType, setModalType] = useState<"add" | "update">("add")
  const [selectedTestimonial, setSeletedTestimonial] = useState<Testimonial | null>(null)

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

  const openUpdateModal = (faq: Testimonial) => {
    setModalType("update")
    setSeletedTestimonial(faq)
    setShowModal(true)
  }

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

   const handleDelete = (testimonial: Testimonial) => {
    router.delete(route("testimonials.destroy", testimonial.id), {
      preserveScroll: true,
    })
  }

  return (
    <>
      {showModal && (
        <TestimonialModal
          closeModal={closeModal}
          type={modalType}
          testimonial={selectedTestimonial ?? undefined}
        />
      )}

      <div className={styles["web__testimonials"]}>
        <PageIntro
          title={"Client Testimonials"}
          description={
            "Create, update and delete your client testimonials that shows on the website"
          }
        />

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

        { testimonials?.length > 0 ? <div className={styles["web__testimonials__grid"]}>
          {testimonials?.map((testimonial: any) => (
            <div
              key={testimonial.id}
              className={styles["web__testimonials__grid--item"]}
            >
              <span className={styles["web__testimonials__grid--item--role"]}>{ testimonial?.role }</span>
              <h5>{testimonial.name}</h5>
              <p>{testimonial.testimony}</p>

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

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

export default WebsiteTestimonials