/** 
 * Display an STL file in a 3D viewer i.e. for Nora
 */

import React, { Component } from 'react'
import { connect } from 'react-redux'

import STLViewer from '../stl/STLViewer'
import { STL_FILES } from '../stl-files.js'

class StlOverlay extends Component {
  state = {
    stl: null,
  }

  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.load()
  }

  componentDidUpdate(prevProps) {
    // console.log(this.props.location.pathname, prevProps.location.pathname)
    if (this.props.location.pathname !== prevProps.location.pathname) {
      this.load()
    }
  }

  load() {
    const { page_name } = this.props.match.params
    if (STL_FILES[page_name]) {
      this.setState({
        stl: STL_FILES[page_name],
      })
    } else {
      this.setState({
        stl: null,
      })
    }
  }

  render() {
    const { stl } = this.state
    if (!this.props.interactive || !stl) return null
    return (
      <STLViewer
        url={stl?.url}
        style={stl?.style}
        transform={stl?.transform}
        width={stl?.width()}
        height={stl?.height()}
        modelMaterial={stl?.modelMaterial}
        backgroundColor='#000000'
        rotate={true}
        orbitControls={true}
      /> 
    );
  }
}

const mapStateToProps = state => ({
  interactive: state.site.interactive,
})

export default connect(mapStateToProps)(StlOverlay)