import styles from "@/app/assets/page.module.css";
import Image from "next/image";
import trumpetIcon from "@/app/assets/trumpet-icon.png";
import { articleDetail, listArticles } from "@/app/api/articles";
import { htmlToText } from "html-to-text";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Article } from "@/app/types/article";

// TODO:
// const [lists, setLists] = useState<Article[]>([]);
// useEffect(() => {
//     listArticles({ cid: "13" }).then((res) => {
//         setLists(() => res.lists);
//     });
// }, []);
const BranchLifeSketch = async () => {
  const { lists } = await listArticles({ cid: "13" });
  return (
    <>
      <div
        className={`title-bar flex items-center px-2 font-bold text-white ${styles.articleBlockTitleBar} relative`}
      >
        <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
        <span className={"ml-2 text-[14px]"}>分院生活剪影</span>
      </div>
      <div className={"h-[216px] bg-[#e1f1fd]"}>
        {/*@ts-ignore*/}
        <swiper-container
          style={{
            height: "100%",
          }}
          autoplay
          autoplay-pause-on-mouse-enter={true}
          loop
          slides-per-view="2"
          direction={"vertical"}
        >
          {lists?.map(async (article) => {
            const articleInfo = await articleDetail({
              id: `${article.id}`,
            });
            const articleText = htmlToText(articleInfo.content, {
              selectors: [
                {
                  selector: "img",
                  format: "skip",
                },
              ],
            });
            return (
              // @ts-ignore
              <swiper-slide key={article.id}>
                <div className={"flex h-[108px] w-full px-2 py-4"}>
                  <Link
                    className={"aspect-square"}
                    href={`/branch-life-sketch/${article.id}`}
                  >
                    <img
                      alt={article.title}
                      className={"h-full w-full"}
                      src={article.image.replace(
                        "http://101.34.131.16:8084/api/uploads/",
                        "",
                      )}
                    />
                  </Link>
                  <div className={"ml-1 w-0 flex-1"}>
                    <Link
                      href={`/branch-life-sketch/${article.id}`}
                      className={"truncate text-xs text-[#144673]"}
                    >
                      {article.title}
                    </Link>
                    <div className={"mt-3 line-clamp-4 text-xs text-[#797979]"}>
                      {articleText}
                    </div>
                  </div>
                </div>
                {/*@ts-ignore*/}
              </swiper-slide>
            );
          })}
          {/*@ts-ignore*/}
        </swiper-container>
      </div>
    </>
  );
};

export default BranchLifeSketch;