import React, { useEffect, useMemo } from "react";
import "../assets/stylesheets/project.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
import projects from "../assets/data/projects";
import WaterfallPosition from "./Waterfall";

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">
          <div>
            <h1 className="projects__title">Active Projects</h1>
            <WaterfallPosition columnNumber={count} list={projects.active} />
          </div>
          <div>
            <h1 className="projects__title">Retired/Inactive Projects</h1>
            <WaterfallPosition columnNumber={count} list={projects.inactive} />
          </div>
        </div>
        {/* <WaterfallPositionDemo /> */}
      </div>
    </div>
  );
};
export default Project;
