import React from 'react'
import { isFunction, isSafe } from 'exotic'
import { wording } from 'src/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 = event => {
    inviteUserState.shouldValidateForm = true
    if (inviteUserState.isAllFormsValid === true) {
      if (
        inviteUserState.savedList.length > 0 &&
        isFunction(onSendInviteClick)
      ) {
        onSendInviteClick(inviteUserState.savedList)
      }
      state.userInviteList = []
    } else if (inviteUserState.isAllFormsValid === false) {
      inviteUserState.isAllFormsValid = true
    }
    inviteUserState.shouldValidateForm = false
  }
  // const isDisabled = !(
  //   isSafe(state.userInviteList) && state.userInviteList.length >= 1
  // )
  return (
    <StyledButton
      text={wording.sendInvite}
      onClick={handleSendInviteClick}
      {...state}
      // isDisabled={isDisabled}
    />
  )
}

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,
}