import * as gsap from "https://cdn.skypack.dev/[email protected]";
import * as React from "https://cdn.skypack.dev/[email protected]";
import * as ReactDOM from "https://cdn.skypack.dev/[email protected]";

// Dummy component of width 100vw to mirror app version where there's such component with actual content and with this same width
const SectionOne = () => {
  return (
    <section id="section-one" data-scroll-section className="section1">
      empty test div!
    </section>
  );
};

// The component with the element I want to animate with scroll trigger
const SectionThree = () => {
  React.useEffect(() => {
    gsap.gsap.registerPlugin(ScrollTrigger);
    gsap.gsap.to("#img", {
      scrollTrigger: {
        horizontal: true,
        scroller: "#scroll",
        trigger: "#img",
        start: "left center",
        end: "left left",
        invalidateOnRefresh: true,
        markers: true,
        toggleActions: "play reverse play reverse",
        onEnter: () => {
          console.log("Enter");
        }
      },
      clipPath: "inset(0% 0% 0% 0%)"
    });
  }, []);

  return (
    <section data-scroll-section>
      <div className="section">
        <div className="textWrapper">
          <h2 className="title">A minmalistic approach to chair design</h2>
          <p className="text">
            Barn & Bed  is a chair without any unnecessary details or materials:
            it features a seat in molded polyurethane with a simple steel
            structure. This flexible, stackable chair can be used both indoors
            and outdoors, and has the potential to establish a new way of
            defining furniture for public spaces.
          </p>
        </div>
        <div className="imageWrapper">
          <img
            alt=""
            id="img"
            src="https://res.cloudinary.com/tobijudah/image/upload/v1624131934/barn-and-bed/photos/section-3_ldifxv.png"
            className="image"
          />
        </div>
      </div>
    </section>
  );
};

function App() {
  React.useEffect(() => {
    const scroll = new LocomotiveScroll({
      smooth: true,
      el: document.querySelector("#scroll"),
      direction: "horizontal",
      gestureDirection: "both",
      tablet: {
        smooth: true
      },
      smartphone: {
        smooth: true
      }
    });
    gsap.gsap.registerPlugin(ScrollTrigger);
    scroll.on("scroll", ScrollTrigger.update);
    ScrollTrigger.scrollerProxy(document.querySelector("#scroll"), {
      scrollTop(value) {
        if (scroll) {
          return arguments.length
            ? scroll.scrollTo(value, 0, 0)
            : scroll.scroll.instance.scroll.y;
        }
      },
      scrollLeft(value) {
        if (scroll) {
          return arguments.length
            ? scroll.scrollTo(value, 0, 0)
            : scroll.scroll.instance.scroll.x;
        }
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight
        };
      },
      pinType: document.querySelector("#scroll").style.transform
        ? "transform"
        : "fixed"
    });

    const lsUpdate = () => {
      if (scroll) {
        scroll.update();
      }
    };

    ScrollTrigger.addEventListener("refresh", lsUpdate);
    ScrollTrigger.refresh();
  }, []);

  return (
    <div id="scroll" className="app" data-scroll-container>
      <SectionOne />
      <SectionThree />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));