import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import { names, faces } from './faces'
import * as markers from './markers'
import * as mesh from './mesh'

import './editor.css'

import * as offsets from ' ./all_faces_offsets'

const origin = { x: -0.037, y: 0.066, z: -0.038, scale: 0.00008 }

class Editor extends Component {
  state = {
    name: "",
    position: { ...origin },
    mesh: null,
  }

  constructor() {
    super()
    setTimeout(() => { this.update('brad_smith_1_0') }, 100  )
  }

  update(name) {
    console.log(name)
    this.setState({ name })
    const face = faces[name]
    markers.swap(face)
    mesh.load(name).then(geometry => {
      let meshes = mesh.createFaceMeshes(geometry)
      setTimeout(() => {
        meshes.solid.material.opacity = 1
        mesh.removeMesh('blank')
        mesh.removeMesh('wireframe')
        const savedPosition = offsets[name]
        this.setState({
          mesh: meshes.solid,
          geometry: {
            x: meshes.solid.position.x,
            y: meshes.solid.position.y,
            z: meshes.solid.position.z,
            scale: meshes.solid.scale.x
          },
          position: { ...(savedPosition || origin) }
        }, () => this.updatePosition())
      }, 10)
    })
  }

  updatePosition() {
    const { geometry, position, mesh } = this.state
    console.log(geometry, position)
    // window['m'] = mesh
    mesh.material.opacity = 1
    mesh.position.setX(geometry.x + position.x)
    mesh.position.setY(geometry.y + position.y)
    mesh.position.setZ(geometry.z + position.z)
    mesh.scale.setX(geometry.scale + position.scale)
    mesh.scale.setY(geometry.scale + position.scale)
    mesh.scale.setZ(geometry.scale + position.scale)
  }
  save() {
    console.log(JSON.stringify({
      [this.state.name]: this.state.position
    }))
  }

  render() {
    return (
      <div className='meshEditor'>
        <select value={this.state.name} onChange={e => this.update(e.target.value)}>
          <option value="">Pick a name</option>
          {names.sort().map(name => <option key={name} value={name}>{name}</option>)}
        </select>
        <label>
          <span>x</span>
          <input
            type="number"
            value={this.state.position.x}
            min={-2} max={2} step={0.001}
            onChange={e => this.setState({ position: { ...this.state.position, x: parseFloat(e.target.value) }}, () => this.updatePosition())}
          />
        </label>
        <label>
          <span>y</span>
          <input
            type="number"
            value={this.state.position.y}
            min={-2} max={2} step={0.001}
            onChange={e => this.setState({ position: { ...this.state.position, y: parseFloat(e.target.value) }}, () => this.updatePosition())}
          />
        </label>
        <label>
          <span>z</span>
          <input
            type="number"
            value={this.state.position.z}
            min={-2} max={2} step={0.001}
            onChange={e => this.setState({ position: { ...this.state.position, z: parseFloat(e.target.value) }}, () => this.updatePosition())}
          />
        </label>
        <label>
          <span>scale</span>
          <input
            type="number"
            value={this.state.position.scale}
            min={0} max={1.1} step={0.00001}
            onChange={e => this.setState({ position: { ...this.state.position, scale: parseFloat(e.target.value) }}, () => this.updatePosition())}
          />
        </label>
        <button onClick={() => this.save()}>Save</button>
      </div>
    )
  }
}

ReactDOM.render(<Editor />, document.querySelector('.links'))
document.querySelector('.teaser').remove()