import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction, isSafe, isArray, isObj } from 'exotic'
import { omit } from 'uxui-modules/utils/omit'
import { FormState, ObserverForm } from 'src/forms'
import { wording } from 'src/words'
import { inputList } from '../fixture'
import { StyledRemoveButton, RemoveUserForm } from './styled'

class FormStateCard extends FormState {
  inputsList = inputList
}

const RemoveUserButton = props => {
  const neededProps = omit(props, ['children'])
  return (
    <StyledRemoveButton
      iconType="close"
      text={wording.remove}
      {...neededProps}
    />
  )
}

const fields = ['emailAddress', 'team', 'role']

@observer
class Form extends ObserverForm {
  SubmitButton = RemoveUserButton
  submitDataQa = 'qa-remove-invite-button'

  static defaultProps = {
    state: new FormStateCard(),
  }

  constructor(props) {
    super(props)
    this.state = new FormStateCard(props)
  }

  fillFields = (inputState, item) => {
    fields.map(fieldName => {
      if (
        isObj(item) &&
        isSafe(item[fieldName]) &&
        inputState.name === fieldName &&
        inputState.value !== item[fieldName]
      ) {
        inputState.setValue(item[fieldName])
      }
    })
  }

  componentDidUpdate() {
    const { item } = this.props
    const toList = state =>
      isArray(state.inputsList[0].elementList) &&
      state.inputsList[0].elementList
    const list = toList(this.state)

    list.map(inputState => this.fillFields(inputState, item))
  }

  handleSubmit = event => {
    const { onRemoveUser, index } = this.props
    event.preventDefault()
    if (this.validateForm()) {
      if (isFunction(onRemoveUser)) {
        const changeArgs = { ...this.state, index }
        onRemoveUser(changeArgs)
      }
    }
  }
}

class RemoveUser extends React.PureComponent {
  render() {
    return (
      <RemoveUserForm>
        <Form {...this.props} />
      </RemoveUserForm>
    )
  }
}

export { RemoveUser }
export default RemoveUser