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

import algorithms from '../algorithms/index.js'
import { RangeInput } from './RangeInput.js'

import state from '../state.js'

const FieldComponent = observer(({ field }) => {
  switch (field.type) {
    case 'range':
      let { name, id } = field
      return (
        <RangeInput
          name={name}
          label={id}
          {...field.props}
          value={field.value}
          onChange={val => (field.value = val)}
        />
      )
    case 'checkbox':
      return (
        <>
          {field.name}
          <input
            type="checkbox"
            onChange={e => (field.value = e.target.checked)}
            checked={field.value}
          />
        </>
      )
    default:
      return <span>Error: Field type {field.type} not known.</span>
  }
})

const Options = ({ fields }) => {
  return (
    <fieldset>
      {fields.map((field, i) => (
        <FieldComponent key={i} field={field} />
      ))}
    </fieldset>
  )
}

@observer
export class SimplificationControl extends React.Component {
  render() {
    return (
      <>
        <h3>Simplification</h3>
        <select
          name="algorithm"
          value={state.algorithmId}
          onChange={e => (state.algorithmId = e.target.value)}
        >
          {algorithms.map((algo, i) => (
            <option key={i} value={algo.id}>
              {algo.name}
            </option>
          ))}
        </select>
        {algorithms.map((algo, i) => (
          <div key={i} hidden={!(algo === state.selectedAlgorithm)}>
            <Options fields={algo.fields} />
          </div>
        ))}
      </>
    )
  }
}