import React from 'react'
import { isFunction, isSafe } from 'exotic'
import { wording } from '@skava/ui/dist/words'
import { AddUser, RemoveUser } from './Form'
import { UserInviteProps, UserInviteState } from './typings'
import { StyledButton, StyledHeading } from './styled'
import { inviteUserState } from './state'

function defaultRenderButton(props: UserInviteProps, state: UserInviteState) {
  const { onSendInviteClick } = props

  const handleSendInviteClick = () => {
    state.handleSendInvite(onSendInviteClick)
  }
  return (
    <StyledButton
      text={wording.sendInvite}
      onClick={handleSendInviteClick}
      {...state}
    />
  )
}

function defaultRenderInviteCard(
  props: UserInviteProps,
  state: UserInviteState
) {
  const { renderAddUserForm, renderRemoveUserForm, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderRemoveUserForm(remainingProps, state)}
      {renderAddUserForm(remainingProps, state)}
    </React.Fragment>
  )
}

function defaultRenderRemoveUserForm(
  props: UserInviteProps,
  state: UserInviteState
) {
  const handleRemoveUserClick = args => {
    const { index } = args
    console.log('handleRemoveUserClick', args.toSerialized(), index)
    state.handleRemoveUser(index)
  }
  return state.userInviteList.map((item, index) => (
    <RemoveUser
      key={index}
      index={index}
      onRemoveUser={handleRemoveUserClick}
      item={item}
    />
  ))
}

function defaultRenderAddUserForm(
  props: UserInviteProps,
  state: UserInviteState
) {
  const handleAddUserClick = args => {
    state.handleAddUser(args.toSerialized())
  }
  return (
    <AddUser
      onAddUser={handleAddUserClick}
      userState={state}
      shouldResetForm={inviteUserState.shouldValidateForm}
    />
  )
}

function defaultRenderHeading(props: UserInviteProps, state: UserInviteState) {
  return <StyledHeading breedType="h2" content={wording.userManagement} />
}

export {
  defaultRenderButton,
  defaultRenderInviteCard,
  defaultRenderRemoveUserForm,
  defaultRenderAddUserForm,
  defaultRenderHeading,
}