import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import {
  ToggleItem,
  ToggleList,
  ListOfToggleProps,
} from '@skava/ui/dist/components/molecules/ToggleList'
import { toCommonState } from '@skava/ui/dist/state/common'
import { Value } from '../typings'
import { InputState } from '../inputs/InputState'
import { InputProps } from '../inputs/typings'

const list: ListOfToggleProps = [
  {
    isSelected: false,
    label: 'Regular',
    value: 'regular',
  },
  {
    isSelected: false,
    label: 'Medium',
    value: 'medium',
  },
].map(item => toCommonState(item))

@observer
class RadioGroupPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return props.type === 'radioGroup'
  }

  /**
   * @todo ensure 1 is selected if required?
   */
  static defaultState = (inputState: InputState) => {
    const validator = (value: Value) => inputState.attributes.required
    return {
      validator,
    }
  }

  render() {
    const { state } = this.props
    const title = 'radio list title'

    return (
      <>
        <label htmlFor={state.identifier}>{title}</label>
        <ToggleList
          breedType="radio"
          id={state.identifier}
          list={list}
          title={title}
        />
      </>
    )
  }
}

export { RadioGroupPlugin }
export default RadioGroupPlugin