"use client";
import Link from "next/link";
import { LinkType } from "../_lib/data/linkType";
import { Link as _Link } from "../_lib/data/link";
import { useEffect, useMemo } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock, faFire, faTimeline, faTimesCircle, faTimesRectangle, faVolumeTimes } from "@fortawesome/free-solid-svg-icons";
import { useAtom } from "jotai";
import { linkTypeAtom } from "../_lib/atom";
import Image from "next/image";

export default function LinkListBox({ linkTypeList, linkList, showHot, showRecent }: { linkTypeList: LinkType[]; linkList: _Link[]; showHot: boolean; showRecent: boolean }) {
    const hotList = useMemo(() => linkList.filter((val, index) => val.isHot && index < 12), [])
    const recentList = useMemo(() => linkList.map(val => val).sort((a, b) => b.addTime - a.addTime).filter((_, idx) => idx < 12), [])
    const [currentId] = useAtom(linkTypeAtom)
    useEffect(() => {
        console.log(currentId);
        
        if (currentId) {
            // 根据 targetId 查找对应的元素
            const element = document.getElementById(currentId);
            if (element) {
                // 滚动到找到的元素位置
                element.scrollIntoView({ behavior: 'smooth' });
            }
        }
    }, [currentId])
    return <div className="flex w-full flex-col gap-y-4">
        {
            showHot && <div className="flex flex-col gap-y-2" >
                <div className="flex items-center text-[#555555]  gap-x-2 text-xl">
                    <FontAwesomeIcon icon={faFire} className="text-red-500"></FontAwesomeIcon>
                    <span className="text-white bg-red-500/90 rounded-2xl px-3  text-[14px] font-bold">热门网站</span>
                </div>
                <div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
                    {
                        hotList.map(val => (
                            <Link key={val._id} className="flex  gap-x-2 bg-white rounded-lg py-4 pl-2 cursor-pointer duration-150 hover:-translate-y-1 shadow-sm"
                                href={val.link || ''} target="_blank">
                                <img src={val.logoLink} className="w-[40px] h-[40px]"></img>
                                <div className="flex-1 w-0 flex flex-col justify-between">
                                    <span className=" font-bold text-ellipsis overflow-hidden whitespace-nowrap">{val.name}</span>
                                    <span className=" text-ellipsis overflow-hidden whitespace-nowrap text-[#666] text-xs" title={val.description}>{val.description}</span>
                                </div>
                            </Link>
                        ))
                    }
                </div>
            </div>
        }
        {
            showRecent && <div className="flex flex-col gap-y-2" >
                <div className="flex items-center text-[#555555]  gap-x-2 text-xl">
                    <FontAwesomeIcon icon={faClock} className="text-blue-500"></FontAwesomeIcon>
                    <span className="text-white bg-blue-500/90 rounded-2xl px-3  text-[14px] font-bold">最新收录</span>

                </div>
                <div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
                    {
                        recentList.map(val => (
                            <Link key={val._id} className="flex  gap-x-2 bg-white rounded-lg py-4 pl-2 cursor-pointer duration-150 hover:-translate-y-1 shadow-sm"
                                href={val.link || ''} target="_blank">
                                <img src={val.logoLink} className="w-[40px] h-[40px]"></img>
                                <div className="flex-1 w-0 flex flex-col justify-between">
                                    <span className=" font-bold text-ellipsis overflow-hidden whitespace-nowrap">{val.name}</span>
                                    <span className=" text-ellipsis overflow-hidden whitespace-nowrap text-[#666] text-xs" title={val.description}>{val.description}</span>
                                </div>
                            </Link>
                        ))
                    }
                </div>
            </div>
        }
        {
            linkTypeList.map(item => (
                <div className="flex flex-col gap-y-2" key={item._id} id={item._id}>
                    <div className="flex items-center text-[#555555]  gap-x-2 text-xl">
                        <img src={item.icon as string} className="w-[30px] h-[30px] object-cover"></img>

                        <span>{item.label}</span>
                    </div>
                    <div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
                        {
                            linkList.filter(val => val.type === item._id).map(val => (
                                <Link key={val._id} className="flex  gap-x-2 bg-white rounded-lg py-4 pl-2 cursor-pointer duration-150 hover:-translate-y-1 shadow-sm"
                                    href={val.link || ''} target="_blank">
                                    <img src={val.logoLink} className="w-[40px] h-[40px]"></img>
                                    <div className="flex-1 w-0 flex flex-col justify-between">
                                        <span className=" font-bold text-ellipsis overflow-hidden whitespace-nowrap">{val.name}</span>
                                        <span className=" text-ellipsis overflow-hidden whitespace-nowrap text-[#666] text-xs" title={val.description}>{val.description}</span>
                                    </div>
                                </Link>
                            ))
                        }
                    </div>
                </div>
            ))
        }
    </div>
}