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'
import { LazyImg } from "@/components/LazyImg";
import ContactImgWhite from '@/assets/img/contactWhite.png'
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} className='min-h-[750px]'>


        <div className="flex h-screen w-full normal-content">
          <div className="left bg-blue-600 pt-16 h-full w-5/12 min-w-[650px] text-white ">
            <div className="pl-28 h-[calc(100vh-92px)] mt-16 relative">
              <div>
                <div className=" hero-title text-white">News</div>
                <div className="subTitle-1-cn text-white">新闻动态</div>
                <div className="absolute bottom-[60px] ">
                  <div className="w-12/12 normal-content text-white">
                    提供区块链融合技术和产业链接的精选内容
                  </div>
                  <div className="w-12/12 normal-content text-white">帮助您紧跟落地实况和未来发展趋势</div>

            <LazyImg 
            img={ContactImgWhite}
            animate='contact'
            className='pt-[25px] w-[234px]'
            ></LazyImg>
                </div>
              </div>
            </div>
          </div>
          <div className="right h-full pt-28 w-7/12 relative" style={{boxSizing:"border-box"}}>
            <NewsScrollView>
              <div className="pb-[235px] ">
                <div>
                  {news.map((i, index) => (
                    <div onClick={()=>navigate(`/news/${i.id}`)} key={index} 
                      className="hoverGlass w-full rounded-3xl flex  max-w-[920px]  my-[15px] min-w-[650px] gap-x-[30px] items-start"
                    >
                        <div className="news-date min-w-[200px] flex  text-white font-medium items-center ">
                          <div className="translate-y-[10px]">
                            <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 flex-cols">
                            <div>{useDate(i.time_stamp).day}</div>
                            <div className='w-10/12 border-t-2 border-white translate-x-[5px]'></div>
                          </div>
                        </div>
                        <div className="news-content text-black flex items-center gap-x-[20px]">
                          <div>
                          <div className="sub-title-cn leading-[35px]">
                            {i.title}
                          </div>
                          <div className="normal-content text-overflow:ellipsis line-clamp-3">
                            {i.desc}
                          </div>
                          </div>      
                          <span className='invisible'>
                            <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
                          </span>
                        </div>
                  </div>
                ))}
              </div>
              <div className="pullup-tips">
                {
                  loading?
                  <div className="after-trigger">
                  <span className="pullup-txt">Loading...</span>
                </div>
                :''  
              }
              </div>
            </div>
          </NewsScrollView>
        </div>

      </div>

    </PageLayout>
  );
}
