import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { observe } from 'xmobx/mobx'
import { isFunction, isSafe, isArray, isObj } from 'exotic'
import { omit } from '@skava/utils'
import { FormState, ObserverForm } from 'src/forms'
import { wording } from 'src/words'
import { inviteUserState } from '../../state'
import { inputList } from '../fixture'
import { validateIsEmpty } from '../deps'
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']
const toList = state =>
  isArray(state.inputsList[0].elementList) && state.inputsList[0].elementList

@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)
  }

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

  componentWillMount() {
    this.disableFields()
  }

  componentDidMount() {
    this.fillFields()
    try {
      this.disposer = observe(inviteUserState, 'shouldValidateForm', () => {
        if (inviteUserState.shouldValidateForm === true) {
          if (validateIsEmpty(this.state.inputsList[0].elementList)) {
            // nothing happens here
          } else if (this.validateForm() === true) {
            inviteUserState.savedList.push(this.state.toSerialized())
          } else {
            inviteUserState.isAllFormsValid = false
          }
        }
      })
    } catch (error) {
      console.log('error')
    }
  }

  componentWillUnmount() {
    if (isFunction(this.disposer)) {
      this.disposer()
    }
  }

  disableFields = () => {
    const list = toList(this.state)

    list.map(inputState => {
      inputState.isDisabled = true
    })
  }

  fillFields = () => {
    const { item } = this.props
    const list = toList(this.state)

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

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

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

export { RemoveUser }
export default RemoveUser