import React from 'react'
import classnames from 'classnames'

export type InputMultiInputProps = {
  name?: string
  value: string
  options: any[]
  onChange(...args: unknown[]): unknown
  'aria-label'?: string
};

export default class InputMultiInput extends React.Component<InputMultiInputProps> {
  render() {
    let options = this.props.options
    if(options.length > 0 && !Array.isArray(options[0])) {
      options = options.map(v => [v, v])
    }

    const selectedValue = this.props.value || options[0][0]
    const radios = options.map(([val, label])=> {
      return <label
        key={val}
        className={classnames("maputnik-button", "maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
      >
        <input type="radio"
          name={this.props.name}
          onChange={_e => this.props.onChange(val)}
          value={val}
          checked={val === selectedValue}
        />
        {label}
      </label>
    })

    return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
      {radios}
    </fieldset>
  }
}