import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { omit } from '@skava/utils'
import { RenderWrapRemainingProps, InputProps, ObserverInput, , InputRenderProps, InputState } from '../../inputs'
import { errorMessageFor, isValid } from '../../../validators'
import { Value } from '../../typings'
import { StyledTextArea, StyledTextAreaWrap } from './styled'

@observer
export class TextAreaPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['textarea'].includes(props.type)
  }

  static defaultState = (inputState: InputState) => {
    return {
      validator: (value: Value) =>
        isValid(value as string, 'required') || errorMessageFor('required'),
    }
  }

  renderWrap = (props: InputRenderProps) => {
    const remainingProps = omit(props, [
      'isActive',
      'data-qa',
      'aria-label',
      'onChange',
      'onFocus',
      'onBlur',
      'identifier',
      'value',
      'label',
      'tooltip',
      'type',

      // isRequired?
      'required',
      'maxLength',
      'minLength',
      'placeholder',
    ]) as RenderWrapRemainingProps

    return <StyledTextAreaWrap {...remainingProps}>{props.children}</StyledTextAreaWrap>
  }

  renderInput = (props: InputRenderProps) => {
    const dataQa = props['data-qa'] || props['dataQa']
    return (
      <StyledTextArea
        isValid={props.isValid}
        isActive={props.isActive}
        isDirty={props.isDirty}
        // aria & qa
        data-qa={dataQa}
        // data-debug={props['data-debug']}
        aria-label={props['aria-label'] || props.label || props.labelText}
        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields
        // aria-required={props.required}
        aria-invalid={props.isValid === false}
        // events
        onChange={props.onChange}
        // @note - these were in wrapper, which did not work well...
        onFocus={props.onFocus}
        onBlur={props.onBlur}
        onKeyPress={props.onKeyPress}
        onKeyDown={props.onKeyDown}
        onKeyUp={props.onKeyUp}
        // browser
        id={props.identifier}
        value={props.value}
        type={props.type}
        // need to manage spreading these...
        minLength={props.minLength}
        maxLength={props.maxLength}
        required={props.required}
        placeholder={props.placeholder}
        disabled={props.isDisabled}
        autoComplete={props.autoComplete}
        autoFocus={props.autoFocus}
        // name
        name={props.propertyName}
      />
    )
  }

  render() {
    const { ref, className, ...remainingProps } = this.props
    return (
      <ObserverInput
        renderWrap={this.renderWrap}
        renderInput={this.renderInput}
        className={className}
        {...remainingProps}
      />
    )
  }
}