import React, { Component, useState } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Canvas, useFrame } from 'react-three-fiber';
// import { useSpring, a } from "react-spring/three";

export default function Cube() {
  const canvas = document.querySelector("#c");
  const renderer = new THREE.WebGLRenderer({ canvas });
  const n = 3;
  const fov = 50;
  const aspect = 2; // the canvas default
  const near = 0.2;
  const far = 50;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 10;
  camera.position.y = 10;
  camera.position.x = 10;
  const controls = new OrbitControls(camera, canvas);
  controls.target.set(n/2 , n/2  , n/2);
  controls.update();
  const scene = new THREE.Scene();
  scene.background = new THREE.Color("white");
  function addLight(x, y, z) {
    const color = 0xffffff;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(x, y, z);
    scene.add(light);
  }
  addLight(-1, 2, 4);
  addLight(1, -1, -2);
  addLight(1, 1, 3)
  const boxWidth = 0.95;
  const boxHeight = 0.95;
  const boxDepth = 0.95;
  let cubes = [];
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
  let cubeClosed = true;
  function makeInstance(geometry, color, x, y, z, opacity) {
    [THREE.BackSide, THREE.FrontSide].forEach(side => {
      const material = new THREE.MeshPhongMaterial({
        color,
        opacity: opacity,
        // transparent: true,
        side,
        //wireframe:true
      });
      const cube = new THREE.Mesh(geometry, material);
      cubes.push(cube);
      scene.add(cube);
      cube.position.set(x, y, z);
    });
  }
  function hsl(h, s, l) {
    return new THREE.Color().setHSL(h, s, l);
  }
  function makecube() {
    var x = 0;
    for (var i = 0; i < n; i++) {
      for (var j = 0; j < n; j++) {
        for (var k = 0; k < n; k++) {
          //makeInstance(geometry, hsl(0.5, 1, 0.5), i, j, k, 0.8);
          if(i > 1 && j == 0 && k >= 1)
            makeInstance(geometry, hsl(0.15, 1, 0.5), i, j, k, 0.8);
          else
            makeInstance(geometry, hsl(0.5, 1, 0.45), i, j, k, 0.8);
          x++;
        }
      }
    }
    cubeClosed = true;
  }
  makecube();
  function expandcube() {
    var x = 0;
    for (var i = 0; i < n; i++) {
      for (var j = 0; j < n; j++) {
        for (var k = 0; k < n; k++) {
          //makeInstance(geometry, hsl(0.5, 1, 0.5), i * 2, j * 2, k * 2, 0.8);
          if(i == 0 && j == 0 && k < 2)
            makeInstance(geometry, hsl(0.15, 1, 0.5), i* 2, j* 2, k* 2, 0.8);
          else
            makeInstance(geometry, hsl(0.5, 1, 0.45), i* 2, j* 2, k* 2, 0.8);
          x++;
        }
      }
    }
    cubeClosed = false;
  }
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
  // let renderRequested = false;

  function render() {
    // renderRequested = undefined;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera);
  }
  render();
  function requestRenderIfNotRequested() {
    // if (!renderRequested) {
    for (let index =0; index< cubes.length; index++) {
      scene.remove(cubes[index]);
    }
    cubes = []
    if (cubeClosed == true)  {
      expandcube();
    } else if (cubeClosed == false) {
      makecube()
    }
    // renderRequested = true;
    //requestAnimationFrame(render);
    // }
  }

  function requestRenderIfNotRequestedAndRotated() {
    requestAnimationFrame(render);
  }

  controls.addEventListener("change", requestRenderIfNotRequestedAndRotated);
  window.addEventListener("dblclick", requestRenderIfNotRequested);
}
Cube();

//export default App;