import React from 'react'
import { useSelector, useDispatch } from 'react-redux'

const tickets = {
  'couch': '85d9977f5426033e058a60c8b81c2c91d331d5eec7bdfed66d354132539d4efb0d01bd6e5d7bc61bc8894b820fff1922d2a2e7e6b7f5883d244f93f0c9ce73daa540ccd7b6d1a1d9ccc40307c3549ff3bbce1a7e902ac438abb53b472d73f2fd2578881f8846e73c4af238f34b9725c41232a2e3129d-d34ace0dbe577c6152ee63654b9e807c',
  'shelf': '20f9d15ecb236b79c4c342f2714558f571d34ae17fc3678f09a4e6742f28045119010401d66d47bd2f4c0a4a5ae92be36c560606effd0a98ec6ebdcec3975a5fd947d156338ff31e4a3c142a7eb4aa864f62d3db3938be957ab118903125b434296303731c19772d5a7fc89ae42348eba26888a80fdd-75013a6ebb275765f424fa8c2b7976a5'
}

const SDViewer = (props) => {
  const dispatch = useDispatch()
  const containerSDRef = useRef(null)
  const { api, ticket, modelViewUrl } = useSelector((state) => state.graphics)
  const { example } = useSelector((state) => state.input)

  let parameters = null

  useEffect(() => {
    async function setupViewer() {
      // container for the viewer
      // here the reference works and the container is loaded correctly
      let _container = containerSDRef.current

       // ShapeDiver Viewer constructor settings
       // Refer to https://app.shapediver.com/api for details
      let settings = {
        container: _container,
        showSceneMode: 1 // do not show the scene automatically
      }

      let api = new window.SDVApp.ParametricViewer(settings);
      dispatch({ type: 'FIELD_UPDATE_GRAPHICS', payload: { api: api }})
      // setApi(api)

      // register a ShapeDiver CommPlugin
      await api.plugins.registerCommPluginAsync({
        // ticket of the model as shown on app.shapediver.com
        ticket: ticket,
        // URL of the ShapeDiver backend system used
        modelViewUrl: modelViewUrl,
        // runtime id to use for this CommPlugin (you might register several)
        runtimeId: 'CommPlugin_1',
        // the following setting tells the viewer to wait with loading of geometry
        deferGeometryLoading: true
      })
      console.log('ShapeDiver CommPlugin successfully loaded')

      // get parameters of the model
      parameters = await api.parameters.get().data
      console.log('Available model parameters', parameters)

      // refresh (load geometry), because the initial parameter update might not have changed any values
      await api.plugins.refreshPluginAsync('CommPlugin_1')

      // finally show the scene
      await api.updateSettingAsync('scene.show', true)
    }

    setupViewer()

  }, [ ticket ])

  return (
    <>
      <h2>Demo {example==='couch' ? 'Couch' : 'Shelf'}</h2>

      <div ref={containerSDRef} style={{width: '100%', height: '600px'}} className='shapediver-container-flex'>
      </div>
    </>
  )
}

const App = (props) => {
  const dispatch = useDispatch()
  const { example } = useSelector((state) => state.input)

  const handleClick = (e, val) => {
    const target = (val === 'couch') ? 'shelf' : 'couch'
    dispatch({ type: 'FIELD_UPDATE_INPUT', payload: { example: target }})
    dispatch({ type: 'FIELD_UPDATE_GRAPHICS', payload: { ticket: tickets[target] }})
  }

  return (
    <div style={{display: "flex"}}>

      <div style={{width: "20%", borderRight: '1px solid red'}}>
        <button name={'example'} value={example} onClick={e => handleClick(e, example)} disabled={(example==='couch') ? true : false}>Click to show Couch</button>
        <br/><br/>
        <button name={'example'} value={example} onClick={e => handleClick(e, example)} disabled={(example==='shelf') ? true : false}>Click to show Shelf</button>
      </div>

      <div style={{width: "80%"}}>
        <SDViewer />
      </div>

    </div>
  )
}
export default App