import React from 'react'
import { isFunction } from 'exotic'
import { ActiveOption, SelectDropDown, ActiveOptionProps } from 'molecules/SelectDropDown'
import {
  SelectionState,
} from 'src/state/SelectionState'
import { InputChain } from '../../../InputChain'
import { SelectBoxWrapper, StyledLabel } from './styled'

class SelectBoxInput extends InputChain {
  static isSatisfiedByProps(props): boolean {
    return props.type === 'select'
  }

  handleChange = args => {
    const { onDropdownChange } = this.get('props')
    const state = this.get('state')
    console.log('[Forms/SelectDropdown] handleDropdownChange()', args, state)
    if (isFunction(onDropdownChange)) {
      onDropdownChange({ value: args, state })
    }
    state.setValue(args)
  }

  render() {
    const props = this.get('props')
    const { label, labelText, wrapperClassName, options, ...remainingProps } = props

    const renderActiveItem = (props: ActiveOptionProps, state: SelectionState) => {
      return <ActiveOption label={label} state={state} {...props} />
    }

    const attributes = {
      renderActiveItem,
      options,
      onChange: this.handleChange,
      ...remainingProps,
    }
    console.debug('[SelectBoxInput] Attributes: ')
    console.info(attributes)

    return (
      <SelectBoxWrapper className={wrapperClassName}>
        <StyledLabel className={'label-text'} content={labelText} />
        <SelectDropDown {...attributes} data-qa={props.dataQa} />
      </SelectBoxWrapper>
    )
  }
}

export { SelectBoxInput }
export default SelectBoxInput