import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { observe } from 'xmobx/mobx'
import { isFunction, isSafe } from 'exotic'
import { omit } from '@skava/utils'
import { ObserverForm, FormState } from '@skava/ui/dist/forms'
import { wording } from '@skava/ui/dist/words'
import { inviteUserState } from '../../state'
import { inputList } from '../fixture'
import { validateIsEmpty } from '../deps'
import { StyledButton, AddUserForm } from './styled'

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

const AddUserButton = props => {
  console.log('Add User Button Props:', props)
  const neededProps = omit(props, ['children'])
  return (
    <StyledButton
      breedType={'icon-with-text'}
      iconType={'plus'}
      text={wording.addUser}
      {...neededProps}
    />
  )
}

@observer
class Form extends ObserverForm {
  static FormState = formStateCard
  // shouldResetFormOnUnmount = true
  SubmitButton = AddUserButton
  submitDataQa = 'qa-add-invite-button'

  static defaultProps = {
    state: formStateCard,
  }

  componentDidMount() {
    const { userState } = this.props

    try {
      this.disposer = observe(inviteUserState, 'shouldValidateForm', () => {
        if (inviteUserState.shouldValidateForm === true) {
          inviteUserState.savedList = []
          if (
            userState.userInviteList.length >= 1 &&
            validateIsEmpty(this.state.inputsList[0].elementList) === true
          ) {
            // nothing happens
          } 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()
    }
  }

  handleSubmit = event => {
    const { onAddUser } = this.props
    event.preventDefault()
    console.log('[AddUser Form] data: ', this.state.toSerialized())
    if (isFunction(onAddUser)) {
      onAddUser(this.state)
      this.state.inputsList.map(this.resetFormState)
    }
  }

  componentWillReceiveProps() {
    const { shouldResetForm } = this.props

    if (shouldResetForm === false && this.state.hasAllValidInputs === true) {
      this.state.inputsList.map(this.resetFormState)
    }
  }
}

class AddUser extends React.Component {
  render() {
    const { userState } = this.props
    const isDisabled = !!(
      isSafe(userState.userInviteList) && userState.userInviteList.length >= 9
    )
    return (
      <AddUserForm isDisabled={isDisabled}>
        <Form {...this.props} />
      </AddUserForm>
    )
  }
}

export { AddUser }
export default AddUser