import React from 'react'
import EditRegistermap from './EditRegistermap'
import EditSetting from './EditSetting'
import RegisterTable from './RegisterTable'

class ShowRegistermap extends React.Component {
  constructor () {
    super()
    this.sayMyName = this.sayMyName.bind(this)
    this.bitmap = {}
  }

  sayMyName (event) {
    event.preventDefault()
    console.log('Hi, my name is', event)
  }

  render () {
    const { registermap, settingList, actions } = this.props
    console.log('Show registermap', registermap, settingList, actions)
    if (typeof settingList === 'undefined') {
      return (
        <p>Please select a registermap</p>
      )
    }

    return (
      <div className='content-flex'>
        <div className='content-main'>
          <h2>Registermap {registermap.name}</h2>
          <EditRegistermap registermap={registermap} actions={actions} />
          <h2>Registers</h2>
          <RegisterTable registermap={registermap} settings={settingList} bitsPerRegister={registermap.bitsPerRegister} nrOfRegisters={registermap.nrOfRegisters} />
        </div>
        <div className='content-aside-right'>
          <h2>Settings</h2>
          {settingList.map((value, idx) => (
            <EditSetting key={idx} setting={value} actions={actions} />
          ))}
        </div>
      </div>
    )
  }
}

export default ShowRegistermap