content: import React from 'react'
  import { withLeapContainer } from './leap'
  import logo from './logo.svg';
  import clonedeep from 'lodash.clonedeep'
  import './SpaceRoom.css';
  
  function restrictToRange (value, min, max) {
    if (value > max) {
      return max
    }
    if (value < min) {
      return min
    }
    return value
  }
  
  function screenPalmPosition(palmPosition, spaceSize) {
    const heightStartScale = 100
    const widthRatio = window.innerWidth / (2*spaceSize)
    const heightRatio = window.innerHeight / (2*spaceSize)
    const x = restrictToRange(palmPosition[0], -spaceSize, spaceSize)
    const y = restrictToRange(palmPosition[1] - heightStartScale - spaceSize, -spaceSize, spaceSize)
    const z = palmPosition[2]
    const xNorm = x * widthRatio
    const yNorm = y * heightRatio
    const normalizedPosition = [xNorm, yNorm, z]
    return normalizedPosition
  }
  
  function itemStyle(item) {
    return Object.assign({}, item.style, {
      transform: `translate3d(${item.pos[0]}px, ${item.pos[1]}px, ${item.pos[2]}px)`
    })
  }
  
  const SpaceRoom = ({frame}) => {
    const hands = frame.hands
    const spaceSize = 50
  
    const itemsStart = [
      {pos: [0, 0, 0], style: {width: 100}, className: null },
      {pos: [200, -150, -50], style: {width: 100}, className: '-shades' },
      {pos: [150, 100, 30], style: {width: 100}, className: '-shades' },
      {pos: [-150, 50, 60], style: {width: 100}, className: '-shades' }
    ]
  
    let items = clonedeep(itemsStart)
  
    if (hands && hands.length) {
  
      if (hands.length === 2) {
  
        // Two hands
        const firstHandPos = Math.abs(hands[0].stabilizedPalmPosition[0])
        const lastHandPos = Math.abs(hands[1].stabilizedPalmPosition[0])
        const distance = firstHandPos + lastHandPos
        const nextLogoWidth = itemsStart[0].style.width * (distance / spaceSize)
        items[0].style.width = nextLogoWidth
  
      } else if (hands[0].pinchStrength > 0.5) {
  
        // Pinch
        const palmPosition = screenPalmPosition(hands[0].palmPosition, spaceSize)
        items.forEach((item, index) => {
          item.pos[0] = itemsStart[index].pos[0] + palmPosition[0]
          item.pos[1] = itemsStart[index].pos[1] + -palmPosition[1]
          item.pos[2] = itemsStart[index].pos[2] + palmPosition[2]
          item.className = null
        })
  
      } else if (hands[0].sphereRadius < 80) {
  
        // Rotation
        const sensitivity = 2
        const angleOffset = Math.PI * hands[0].palmNormal[0] * sensitivity
        const ellipseReductionRatio = 4
        items.forEach((item, index) => {
          if (index) {
            const radius = Math.sqrt(Math.pow(itemsStart[index].pos[0], 2) + Math.pow(itemsStart[index].pos[2] * ellipseReductionRatio, 2))
            const angle = Math.atan(itemsStart[index].pos[2]/itemsStart[index].pos[0])
            const nextAngle = angleOffset + angle
            item.pos[0] = Math.cos(nextAngle) * radius
            item.pos[2] = (Math.sin(nextAngle) * radius) / ellipseReductionRatio
            item.className = null
          } else {
            item.className = '-anim'
          }
        })
  
      } else {
  
        // One hand
        const palmPosition = screenPalmPosition(hands[0].stabilizedPalmPosition, spaceSize)
        const x = palmPosition[0]
        const y = -palmPosition[1]
        const activeAreas = [x>0 && y<0, x>0 && y>0, x<0 && y>0, x<0 && y<0]
        items[0].pos[0] = palmPosition[0]
        items[0].pos[1] = -palmPosition[1]
        items[1].className = activeAreas[0] ? '': '-shades'
        items[2].className = activeAreas[1] ? '': '-shades'
        items[3].className = activeAreas[2] || activeAreas[3] ? '': '-shades'
      }
  
    } else {
      // No hands
      items = clonedeep(itemsStart)
      items[0].className = '-anim'
    }
  
    return (
      <div className="SpaceRoom">
        {items.map((item, index) => (
          <img key={index}
               src={logo}
               className={`SpaceRoom__logo ${item.className ? item.className : ''}`}
               alt="logo"
               style={itemStyle(item)}/>
        ))}
      </div>
    )
  }
  
  export default withLeapContainer(SpaceRoom)
  