import * as React from 'react'
import { Text } from '@skava/ui'
import { observer } from 'xmobx/mobx-react'
import { isValidSelect } from '../../validators'
import { SelectDropDown, SelectProps } from '@skava/ui'
import { InputProps, InputState } from '../inputs'

// @todo !!!
const StyledErrorMessage = Text
const StyledLabel = Text

const renderErrorMessage = (props: { errorText: string; isValid: boolean }) => (
  <StyledErrorMessage
    key="textbox-error-message"
    text={props.errorText}
    className={'input-error-message'}
  />
)
const renderLabel = (props: { labelText: string }) => {
  return <StyledLabel className={'label-text'} content={props.labelText} />
}
const renderSelectDropDown = (props: SelectProps) => {
  return <SelectDropDown {...props} />
}

@observer
class SelectDropDownPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return props.type === 'select'
  }
  static defaultState = (inputState: InputState) => {
    return {
      validate: isValidSelect,
    }
  }

  /**
   * @todo !!! these 3 are good examples of why we need validation strategy
   */
  handleChange = (args: string) => {
    this.props.state.setValue(args)
  }
  handleBlur = () => {
    // this.props.state.validator()
  }
  handleFocus = () => {
    // this.props.state.setIsValid(true)
  }

  render() {
    const {
      // remove label keep labelText?
      label,
      labelText,

      // remove
      // wrapperClassName,

      // should name this properly
      options,

      // should not support classNames in form config...
      className,

      // remove
      dataQa,

      // removing state
      // state,

      ...remainingProps
    } = this.props

    // remove state right now...
    const { state } = remainingProps

    const view = (
      <>
        {renderLabel({
          labelText,
        })}
        {renderSelectDropDown({
          list: options!,
          options: options!,

          // onChange: this.handleChange,
          // onBlur: this.handleBlur,
          // onFocus: this.handleFocus,

          // aria
          'aria-invalid': state.isValid === false,
          // should not need this
          'data-qa': dataQa,
          // this will override the ^ props
          // and is probably why we named it `onDropDownChange`
          ...remainingProps,
        })}
        {renderErrorMessage({
          isValid: state.isValid,
          errorText: state.errorText,
        })}
      </>
    )

    // can do renderWrap here if needed
    return view
  }
}

export { SelectDropDownPlugin }
export default SelectDropDownPlugin