import React, { useEffect, useMemo } from "react";
import { AnimationOnScroll } from "react-animation-on-scroll";
import "../assets/stylesheets/project.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
import { Image } from 'antd';
import projects from '../assets/data/projects';

const Project = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  
  const {bodySize} = useContainer(GlobalStore);
  const count = useMemo(() => {
    if (bodySize.width > 850) {
      return 3;
    }
    if (bodySize.width > 650) {
      return 2;
    }
    return 1;
  }, [bodySize]);
  return (
    <div className="project">
      <div className="project__content">
        <div className="project__content__main">
          <AnimationOnScroll
            animateIn="animate__fadeInDown"
            animateOnce="true"
            duration={1}
            delay={0}
          >
            <h1 className="projects__title">Active Projects</h1>
            <div className="projects_wrap" size={16}>
              {projects.active.map((item) => (
                <div
                  className="project__content__main__container"
                  style={{ width: `calc(${100 / count}% - 16px)` }}
                >
                  <div style={{ display: 'flex', flexDirection: 'row', justifyContent:'space-between'  }}>
                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.title}</h3>
                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.sub}</h3>
                  </div>
                  <div className="project_item_content">
                    <Image className="project_item_content_image" width={"100%"} src={item.img}></Image>
                    <span>{item.content}</span>
                  </div>
                </div>
              ))}
            </div>
            <h1 className="projects__title">Retired Projects</h1>
            <div className="projects_wrap" size={16}>
              {projects.inactive.map((item) => (
                <div
                  className="project__content__main__container"
                  style={{ width: `calc(${100 / count}% - 16px)`}}
                >
                  <div style={{ display: 'flex', flexDirection: 'row', justifyContent:'space-between'  }}>
                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.title}</h3>
                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.sub}</h3>
                  </div>
                  <div className="project_item_content">
                    <Image className="project_item_content_image" width={"100%"} src={item.img}></Image>
                    <span>{item.content}</span>
                  </div>
                </div>
              ))}
            </div>
            {/* <div
              style={{
                height: "100vh",
                width: "100vw",
                border: "1px solid",
                marginTop: "30px",
                overflowY: "scroll",
              }}
            >
              <Waterfall
                columnWidth={236}
                columnCount={2}
                columnGap={24}
                rowGap={24}
                onChangeUlMaxH={(h) => (ulMaxHRef.current = h)}
              >
                {images.map((item, index) => {
                  return (
                    <li key={index} onClick={() => alert("图片地址为:" + item)}>
                      <div>
                        {index + 1}
                        <img src={item} alt="" />
                      </div>
                    </li>
                  );
                })}
              </Waterfall>
            </div> */}
          </AnimationOnScroll>
        </div>
        {/* <WaterfallPositionDemo /> */}
      </div>
    </div>
  );
};
export default Project;