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

import actions from 'site/actions'

import STLViewer from '../stl/STLViewer'

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) 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)

const STL_FILES = {
  "nora-queen-of-night-server": {
    url: "/last-museum/static/media/last-museum/nora-albadri/queen.stl",
    modelMaterial: { 
      color: "#BCC6CC", 
      shininess: 50,
    },
    width: () => window.innerWidth / 2,
    height: () => window.innerHeight,
    style: {
      left: "0",
      top: "0",
    },
    transform: {
      rotate: {
        x: -Math.PI/2,
        y: 0,
        z: 0,
      }
    }
  },

  "nora-lamassu-space": {
    url: "/last-museum/static/media/last-museum/nora-albadri/lamassu.stl",
    modelMaterial: { 
      color: "#bfb8a8", 
      shininess: 60,
    },
    width: () => window.innerWidth / 2,
    height: () => window.innerHeight,
    style: {
      right: "0",
      top: "0",
    },
    transform: {
      rotate: {
        x: -Math.PI/2,
        y: 0,
        z: 0,
      }
    }
  },

  "nora-peg-stairs": {
    url: "/last-museum/static/media/last-museum/nora-albadri/peg.stl",
    modelMaterial: { 
      color: "#0000ff", 
      shininess: 30,
    },
    width: () => window.innerWidth / 2,
    height: () => window.innerHeight,
    style: {
      right: "0",
      top: "0",
    },
    transform: {
      rotate: {
        x: -Math.PI/2,
        y: Math.PI/2,
        z: 0,
      }
    }
  },
  "nora-nefertiti": {
    url: "/last-museum/static/media/last-museum/nora-albadri/nefertiti.stl",
    modelMaterial: { 
      color: "#0000ff", 
      shininess: 30,
    },
    width: () => window.innerWidth / 2,
    height: () => window.innerHeight * 2/3,
    style: {
      left: "0",
      top: "0",
    },
    transform: {
      rotate: {
        x: -Math.PI/2,
        y: 0,
        z: 0,
      }
    }
  },
  "nora-horus-2": {
    url: "/last-museum/static/media/last-museum/nora-albadri/shehorus.stl",
    modelMaterial: { 
      color: "#ff8888", 
      shininess: 100,
    },
    width: () => window.innerWidth / 2,
    height: () => window.innerHeight,
    style: {
      right: "0",
      top: "50%",
      transform: "translateY(-50%)",
    },
    transform: {
      rotate: {
        x: -Math.PI/2,
        y: 0,
        z: 0,
      }
    }
  }
}