import HoverBox from "@/components/HoverBox";
import { NewsScrollView } from "@/components/NewsScrollView";
import { PageLayout } from "@/layouts/PageLayout";
import { getNews } from "@/service/api";
import { array } from "prop-types";
import * as React from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { count, filter, map, reduce } from "rxjs";
import { useNavigate } from 'react-router-dom';
import { baasBalls } from "@/config/ballSetting";
import {  newsBg } from "@/config/bgSetting";
import { ChevronRightIcon } from "@heroicons/react/solid";
import * as dayjs from 'dayjs'
export interface IAppProps {}

export default function News(props: IAppProps) {
  const [news, setNews] = useState<any[]>([]);
  const [loading,setLoading] = useState(false)
  const navigate =useNavigate()
  useEffect(() => {
    setLoading(true);
    (async () => {
      (await getNews()).pipe<any[]>(map((v) => v.data.list)).subscribe(
        (v) => {
          const result = v.filter((v, i) => i < 10);
          setNews(v);
          setLoading(false);
        },
        (err) => new Error(err)
      );
    })();
  }, []);

  const getDate = (time: number) => {
    const d = dayjs.unix(Math.floor(time/1000) )
    return {
      year: d.year().toString(),
      day: d.date(),
      month: d.month()+1>10?d.month()+1:"0"+(d.month()+1)
    };
  };


  const useDate = useCallback((time: number)=>getDate(time),[])

  return (
  <PageLayout fullscreen  gradientConfig={newsBg[0].config}>
      <div className="flex h-screen w-full  normal-text">
        <div className="left bg-blue-600 pt-16 h-full w-5/12 min-w-[650px] text-white ">
          <div className="pl-28 h-[75%] mt-16 relative">
            <div>
              <div className=" hero-title text-white">News</div>
              <div className="  sub-title-cn text-white">新闻动态</div>
              <div className="absolute bottom-0 ">
                <div className="w-12/12 content-1-cn text-white">
                  提供区块链融合技术和产业链接的精选内容
                </div>
                <div className="w-12/12 content-1-cn text-white">帮助您紧跟落地实况和未来发展趋势</div>
              </div>
            </div>
          </div>
        </div>
        <div className="right h-full pt-28 w-7/12 relative">
          <NewsScrollView>
            <div className='mb-12 pb-[200px]'>
              <ul className="news-list -translate-x-[25px]">
                {news.map((i, index) => (
                  <div onClick={()=>navigate(`/news/${i.id}`)} key={index}>
                    <HoverBox className="max-w-[90%] my-[15px] flex gap-x-[20px] items-center min-w-[650px] ">
                      <>
                        <div className="news-date min-w-[200px] flex  text-white font-medium items-center ">
                          <div className="translate-y-3">
                            <div className="int-font-sub">
                              {useDate(i.time_stamp).year}/
                            </div>
                            <div className="int-font-sub text-right">
                              {useDate(i.time_stamp).month}/
                            </div>
                          </div>
                          <div className="int-font-hero border-white text-right border-b-2">
                            {useDate(i.time_stamp).day}
                          </div>
                        </div>
                        <div className="news-content text-black ">
                          <div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2">
                            {i.title}
                          </div>
                          <div className="text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3">
                            {i.desc}
                          </div>
                        </div>
                        <span className='invisible'>
                          <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
                        </span>
                      </>
                    </HoverBox>
                  </div>
                ))}
              </ul>
              <div className="pullup-tips">
                {/* <div className="before-trigger">
                  <span className="pullup-txt">Pull up and load more</span>
                </div> */}
                {
                  loading?
                  <div className="after-trigger">
                  <span className="pullup-txt">Loading...</span>
                </div>
                :''  
              }
              </div>
            </div>
          </NewsScrollView>
        </div>
      </div>

    </PageLayout>
  );
}
