import Menu from "."
import { useMediaQuery } from "hooks/useMediaQuery"
// @ts-ignore
import { FC } from "react"
import { BHArticle, BHArticleFullCategory } from "helper/types"
import { get_articles } from "helper"
import Image from "next/image"
import { useQuery } from "@tanstack/react-query"
async function fetchData() {
    let d = await get_articles()
    return d
}

const SideMenu: FC = () => {
    const isSmall = useMediaQuery({ maxWidth: "1380px" })
    const isMobile = useMediaQuery({ maxWidth: "415px" })
    const {data} = useQuery(['articles'], fetchData, {
        staleTime: 900000,
        cacheTime: 900000
    })
    
    return (
        <Menu height="36rem" barTitle="Articles"
            contentMaxHeight={"34.25rem"}
            contentMinHeight={"34.25rem"}
            width={isSmall ? (isMobile ? "80%" : "24rem") : "80%"}
            marginTop={isSmall ? "1.5rem" : ""}
            marginRight={!isSmall ? "1.5rem" : ""} paddingLeft={0} paddingRight={0}
            style={{
                float: "right",
            }}
            alignCenter={true}>
            <div className=" max-h-[32.5rem] grid gap-5 place-items-center 
     rounded-b-lg h-[32.5rem]" style={{
                    overflow: "overlay",
                    overflowX: "hidden",
                    width: "100%"
                }}>
                {/* <Timeline
  dataSource={{
    sourceType: "profile",
    screenName: 'brawlhalla'
  }}
  options={{height: "32.5rem", width: 9999, maxWidth: "100%", overflow: "hidden"}}
 /> */}
                {data?.map((article: BHArticle, index: number) => {
                    let title = article.title
                    .replace(/&#8211;/g, "–")
                    .replace(/&#038;/g, "&")
                    .replace(/&#8217;/g, "’")
                    return (
                        <a aria-label={title} title={title}
                        target="_blank" rel="noreferrer" key={`article_${index}`} href={article.href}
                            className={`flex flex-col group w-[95%] h-52 ${Number(index) === 0 ? "mt-3" : ""}  
        ${(Number(index) + 1) === data.length ? "mb-3" : ""}  
        font-Coda text-white-300`}>
                            <div className="h-[120%]  relative ">
                                <Image objectFit="contain" layout="fill" alt="Article image"
                                    src={article.src} />
                            </div>
                            <div className="mt-1">
                                <h1 >
                                {title.slice(0, 25) + '…'}
                                </h1>
                                <p className="text-xs mt-1 text-grey-400">
                                    {article.date} | {article.categories.map((cat: BHArticleFullCategory, cat_i: number) => {
                                        let endText = ((Number(cat_i) + 1) < article.categories.length) ? "| " : ""
                                        return (
                                            <span key={`cat_${index}_${cat_i}`} className="text-grey-400">
                                                {cat.name} {endText}
                                            </span>
                                        )
                                    }
                                    )}
                                </p>
                            </div>
                        </a>
                    )
                })
                }
            </div>
        </Menu>
    )
}


export default SideMenu