import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction, isTrue } from 'exotic'
import { omit } from 'uxui-modules/utils/omit'
import { ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { inputList } from '../fixture'
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,
  }

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

  resetFormState(inputState) {
    if (inputState.elementList.length > 0) {
      inputState.elementList.map((inputElement, index) => {
        if (inputElement.type === 'select') {
          inputElement.setValue(inputElement.options[0].label)
        }
        if (inputElement.type === 'text') {
          inputElement.setValue('')
        }
      })
    }
  }
}

class AddUser extends React.PureComponent {
  render() {
    const { isDisabled } = this.props
    return (
      <AddUserForm isDisabled={isDisabled}>
        <Form {...this.props} />
      </AddUserForm>
    )
  }
}

export { AddUser }
export default AddUser