import { ScrollView } from "@/components/ScrollView";
import { BallAnime } from "@/layouts/BallAnime";
import { PageLayout } from "@/layouts/PageLayout";
import chain33Bg from "@/assets/img/chain33.png";
import StyledButton from "@/components/StyledButton";
import { IProps } from "@/common/Iprops.interface";
import { Suspense, useCallback, useMemo } from "react";
import { AppContianer } from "@/layouts/AppContianer";
import { GradientLay } from "@/layouts/GradientLay";
import Gao from "@/assets/img/gao.png";
import Jian from "@/assets/img/jian.png";
import Kuo from "@/assets/img/kuo.png";
import Weng from "@/assets/img/weng.png";
import An from "@/assets/img/an.png";
import { useNavigate } from "react-router";
import { LazyImg } from "@/components/LazyImg";
import { chain33Features } from "@/config/constants";
interface HeroItemType extends IProps {
  heroTitle: string;
  subtitle: string;
  content: string;
  order?: number;
  img?: any;
}
const HeroItem = (props: HeroItemType) => {
  const { heroTitle, subtitle, content, order, img } = props;
  const itemPosition = useMemo(() => {
    if (order && order % 2 === 0) {
      return false;
    } else {
      return true;
    }
  }, [order]);
  return (
    <div
      className={`flex min-h-[750px] h-[85vh] w-[148px]  py-16 text-white justify-center 
      ${itemPosition ? "items-start" : " items-end"}
   `}
    >
      <div>
        <div className="hero font-sans font-extrabold text-9xl">
          <img src={img} />
        </div>
        <div className="py-[10px] flex-cols items-center gap-x-[24px]">
                <div className='sub-title-cn text-white'>
                  {subtitle}
                </div>
                <div className=" w-[80px] h-[2px] bg-white rounded"></div>
        </div>
        <div className=" w-[165px] normal-content text-white">{content}</div>
      </div>
    </div>
  );
};

export default function Chain33() {
  const navigate = useNavigate();
  const getItemData = useCallback((name: string) => {
    return chain33Features.find((k) => k.title === name);
  }, []);
  const resource = import.meta.env.VITE_CHAIN33_DOWNLOAD
  const github = import.meta.env.VITE_CHAIN33_GIT
  const goLink = (name:string)=>{
    switch(name){
      case 'resource':
          window.open(resource,'_blank')
        break;
      case 'github':
          window.open(github,'_blank')
        break;
    }
  }
  return (
    <ScrollView>
      <div className="vertival-content">
        <PageLayout>
          <div className="w-full h-full flex justify-center items-baseline overflow-hidden">
            <div className="  mx-auto  -translate-y-[5%] w-[1440px] relative  ">
              <div className="absolute   z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[20%] justify-center text-white">
                <div>
                  <div className="p-[42px] border-white border-[4px] rounded">
                    <div className="super-hero-title py-5 tracking-widest">
                      Chain33
                    </div>
                    <div className="title-1-cn text-white font-normal  pt-5 tracking-wide text-center">
                      复杂美区块链开发者平台
                    </div>
                  </div>
                  <div className="pt-16 flex justify-center items-center gap-x-3">
                    <StyledButton text="开源社区"
                      onClick={()=>goLink('github')}
                    ></StyledButton>
                    <StyledButton text="资源下载"
                      onClick={()=>goLink('resource')}
                    ></StyledButton>
                    <StyledButton
                      text="立即上手"
                      color="black"
                      onClick={() => navigate("/docs/2")}
                    ></StyledButton>
                  </div>
                </div>
              </div>
              <LazyImg
                img={chain33Bg}
                className="object-scale-down object-bottom z-[9]"
              ></LazyImg>
            </div>
          </div>
        </PageLayout>
        <PageLayout className=" bg-[#084DFF] relative items-center justify-center">
            <AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
              <div className='centred -translate-y-[30px] w-full labtop:w-10/12 mx-auto'>
                <div className="flex justify-between items-center gap-x-5 min-h-[750px]">
                  <HeroItem
                    heroTitle="高"
                    img={Gao}
                    order={1}
                    subtitle={getItemData("高效")!.title}
                    content={getItemData("高效")!.context}
                  ></HeroItem>
                  <HeroItem
                    heroTitle="安"
                    img={An}
                    order={2}
                    subtitle={getItemData("安全")!.title}
                    content={getItemData("安全")!.context}
                  ></HeroItem>
                  <HeroItem
                    heroTitle="简"
                    img={Jian}
                    order={3}
                    subtitle={getItemData("简单")!.title}
                    content={getItemData("简单")!.context}
                  ></HeroItem>
                  <HeroItem
                    heroTitle="稳"
                    img={Weng}
                    order={4}
                    subtitle={getItemData("稳定")!.title}
                    content={getItemData("稳定")!.context}
                  ></HeroItem>
                  <HeroItem
                    heroTitle="扩"
                    img={Kuo}
                    order={5}
                    subtitle={getItemData("高扩展性")!.title}
                    content={getItemData("高扩展性")!.context}
                  ></HeroItem>
                </div>
              </div>
            </AppContianer>
        </PageLayout>
      </div>
    </ScrollView>
  );
}
