import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, useSelector, useDispatch } from 'react-redux'
import { createStore } from 'redux'

import App from './App'

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

const initialState = {
  graphics: {
    api: {},
    ticket: tickets['couch'],
    modelViewUrl: 'eu-central-1'
  },
  input: {
    example: 'couch'
  }
}

const myReducer = (state, action) => {
  switch (action.type) {
    case 'FIELD_UPDATE_GRAPHICS': {
      state.graphics = Object.assign({}, state.graphics, action.payload)
      return Object.assign({}, state)
    }
    case 'FIELD_UPDATE_INPUT': {
      state.input = Object.assign({}, state.input, action.payload)
      return Object.assign({}, state)
    }
    default:
      return state
  }
}

const store = createStore(
  myReducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

const DemoDirectEmbedding = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  )
}

export default ReactDOM.render(
  <DemoDirectEmbedding />, document.getElementById('main') || document.getElementById('root')
)