/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import styles from "./blog-item.module.scss"
import { useEffect, useState } from "react"
import { usePage, Link } from "@inertiajs/react"
import { BiSolidEdit } from "react-icons/bi"
import { MdDelete } from "react-icons/md"
import { FiEye } from "react-icons/fi"

import blogImg from "../../../../../public/chart-img3.avif";

import WriteAndUpdateBlogModal from "@/components/admin/Modals/WriteAndUpdateBlogModal"
import DeleteConfirmationModal from "@/components/admin/Modals/DeleteConfirmationModal"

import { formatDate } from "@/lib/utils/format-date"
import { truncateText } from "@/lib/utils/truncate-text"

interface BlogItemProps {
  blog: {
    id: any
    title: string
    intro: string
    created_at: string
    category: string
    body: string
  }
}

const BlogItem = ({ blog }: BlogItemProps) => {
  const [isAdmin, setIsAdmin] = useState(false)

  const [blogModal, setBlogModal] = useState(false)

  const [deleteModal, setDeleteModal] =
    useState(false)

  const { url } = usePage()

  const {
    id,
    title,
    body,
    category,
    created_at,
  } = blog

  useEffect(() => {
    setIsAdmin(
      url.startsWith("/admin/publications")
    )
  }, [url])

  const toggleBlogModal = () => {
    setBlogModal((prev) => !prev)
  }

  const toggleDeleteModal = () => {
    setDeleteModal((prev) => !prev)
  }

  const blogContent = (
    <>
      <div className={styles["blog__item--img"]}>
        <img
          src={blogImg}
          alt={title}
        />

        <span>{category}</span>
      </div>

      <div className={styles["blog__item--body"]}>
        <h1>{title}</h1>

        <div
          className={
            styles["blog__item--body--meta"]
          }
        >
          <small>
            {formatDate(created_at)}
          </small>
        </div>

        <p>{truncateText(body)}</p>
      </div>
    </>
  )

  return (
    <>
      {blogModal && (
        <WriteAndUpdateBlogModal
          type="update"
          blog={blog}
          closeModal={toggleBlogModal}
        />
      )}

      {deleteModal && (
        <DeleteConfirmationModal
          closeModal={toggleDeleteModal}
          deleteUrl={route(
            "admin.publications.destroy",
            id
          )}
          title="Delete Blog"
          description="You are about to delete this blog and it will no longer be available to your users. Please confirm before proceeding."
        />
      )}

      {!isAdmin ? (
        <Link
          href={route(
            "dashboard.blogs.show",
            { id }
          )}
          className={styles["blog__item"]}
        >
          {blogContent}
        </Link>
      ) : (
        <div className={styles["blog__item"]}>
          <Link
            href={route(
              "admin.publications.show",
              { id }
            )}
            className={
              styles["blog__item--content"]
            }
          >
            {blogContent}
          </Link>

          <div
            className={
              styles[
                "blog__item--body--buttons"
              ]
            }
          >
            <div
              className={
                styles[
                  "blog__item--body--buttons--options"
                ]
              }
            >
              <Link
                href={route(
                  "admin.publications.show",
                  { id }
                )}
                className={
                  styles[
                    "blog__item--body--buttons--options--view"
                  ]
                }
              >
                <FiEye />
                View
              </Link>

              <button
                type="button"
                onClick={toggleBlogModal}
                className={
                  styles[
                    "blog__item--body--buttons--options--edit"
                  ]
                }
              >
                <BiSolidEdit />
                Update
              </button>

              <button
                type="button"
                onClick={toggleDeleteModal}
                className={
                  styles[
                    "blog__item--body--buttons--options--delete"
                  ]
                }
              >
                <MdDelete />
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

export default BlogItem