import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { NO_OP } from 'exotic'
import { UserInvite as UserInvitePlaceholder } from 'abstractions/B2B/UserManagement'
import { UserInviteProps } from './typings'
import {
  defaultRenderButton,
  defaultRenderInviteCard,
  defaultRenderRemoveUserForm,
  defaultRenderAddUserForm,
  defaultRenderHeading,
} from './renderProps'
import { UserInviteStorage } from './state'

@observer
class UserInvite extends React.Component<UserInviteProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderButton: defaultRenderButton,
    renderInviteCard: defaultRenderInviteCard,
    renderRemoveUserForm: defaultRenderRemoveUserForm,
    renderAddUserForm: defaultRenderAddUserForm,
    renderHeading: defaultRenderHeading,
    // handlers
    onSendInviteClick: NO_OP,
  }

  userInviteStorage = new UserInviteStorage()

  render() {
    console.log('Preset/UserInvite', this.userInviteStorage)
    return (
      <UserInvitePlaceholder {...this.props} state={this.userInviteStorage} />
    )
  }
}

export { UserInvite }
export default UserInvite