/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./publications.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import { useState } from "react"
import News from "@/components/dashboard/News"
import WriteAndUpdateBlogModal from "@/components/admin/Modals/WriteAndUpdateBlogModal"

const Publications = ({ publications }: any) => {
    const [toggleActive, setTogglActive] = useState(1)
    const [marketNewsModal, setMarketNewsModal] = useState(false)

    //Toggle Marketnews modal
    const toggleMarketNewsModal = () => {
      setMarketNewsModal(!marketNewsModal)
    }

    const toggleActiveState = (key: number) => {
      setTogglActive(key)
    }
    // console.log("Publications are", publications)
  return (
    <>
    { marketNewsModal ? <WriteAndUpdateBlogModal type="add" closeModal={toggleMarketNewsModal} /> : null }
    
    <div className={ styles["publications"] }>
        <PageIntro title="Manage Publications" description="Delight your users with informed publications - write, update and delete publications." />
        <div className={styles['publications__tab']}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1 ? styles['publications__tab--item--active'] : styles['publications__tab--item']
          }
        >
          Blog Posts
        </div>

        <div
          onClick={ toggleMarketNewsModal }
          className={
            toggleActive === 2 ? styles['publications__tab--item--active'] : styles['publications__tab--item']
          }
        >
           Create Blog Post
        </div>
      </div>
      <div className={styles['publications__children']}>
        { toggleActive === 1 ? <News news={ publications } /> : null  }
      </div>
    </div>
    </>
  )
}

Publications.layout = (page: React.ReactNode) => (
    <AdminDashboardLayout title="Manage Publications" children={page} />
  )

export default Publications