import React, {useLayoutEffect, useRef} from "react";

import { Link } from "gatsby"
import hoverEffect from 'hover-effect'
import Parallax from 'parallax-js'

import nike from "../images/project_nike.jpg"
import larsen from "../images/project_larsen.jpg"
import displacement from "../images/displacement.png"


function Projects() {

  let scene1 = useRef(null)
  let scene2 = useRef(null)
  let scene3 = useRef(null)
  let scene4 = useRef(null)
  let distortImage1 = useRef(null)
  let distortImage2 = useRef(null)

  useLayoutEffect(() => {


    let parallax1 = scene1
    new Parallax(parallax1);
    let parallax2 = scene2
    new Parallax(parallax2);
    let parallax3 = scene3
    new Parallax(parallax3);
    let parallax4 = scene4
    new Parallax(parallax4);

      new hoverEffect({
        parent: distortImage1,
        imagesRatio: 600 / 600,
        intensity: 1,
        image1: nike,
        image2: nike,
        displacementImage: displacement
        });

      new hoverEffect({
        parent: distortImage2,
        imagesRatio: 600 / 600,
        intensity: 1,
        image1: larsen,
        image2: larsen,
        displacementImage: displacement
        });

  },)

  return (
    <>
    <div class="box2"></div>
    <div class="grid">
        <div id="image-container" ref={el => scene1 = el}>
        <Link to="/projects/nike"><div class="project-image" data-depth="0.2" ref={el => distortImage1 = el}></div></Link>
        </div>
        <div id="project" ref={el => scene2 = el}>
          <div class="project-title" data-depth="0.3"><Link to="/projects/nike">Nike</Link></div>
          <div class="project-desc" data-depth="0.2">Concept / UX / Motion Design</div>
          <div class="project-number" data-depth="0.2">01</div>
        </div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="grid">
        <div id="image-container" ref={el => scene3 = el}>
        <Link to="/projects/larsen"><div class="project-image" data-depth="0.2" ref={el => distortImage2 = el}></div></Link>
        </div>
        <div id="project" ref={el => scene4 = el}>
          <div class="project-title white" data-depth="0.4"><Link to="/projects/larsen">Larsen&Larsen</Link></div>
          <div class="project-desc white" data-depth="0.5">Web / Branding / Motion Design</div>
          <div class="project-number white" data-depth="0.2">02</div>
        </div>
    </div>
    <div class="box3"></div>
    </>
  );
}



export default Projects