import React from 'react'
import { observer } from 'mobx-react'

import state from '../state.js'
import './TileLayerControl.css'

const RadioButton = ({ option, selected, fullName }) => {
  return (
    <label className={option === selected ? 'selected' : ''}>
      <input
        type="radio"
        name="tileLayer"
        value={option}
        checked={option === selected}
        onChange={() => {}}
      />
      {fullName ? fullName : option}
    </label>
  )
}

@observer
export class TileLayerControl extends React.Component {
  render() {
    return (
      <>
        <h3>Background Layer</h3>
        <fieldset
          className="radio-grp"
          onChange={e => (state.tileLayer = e.target.value)}
        >
          <RadioButton
            option="none"
            selected={state.tileLayer}
            fullName="None"
          />
          <RadioButton
            option="osmDE"
            selected={state.tileLayer}
            fullName="OpenStreetMap DE"
          />
          <RadioButton
            option="osmMapnik"
            selected={state.tileLayer}
            fullName="OpenStreetMap Mapnik"
          />
        </fieldset>
      </>
    )
  }
}