import React from 'react'
import { CardState } from '@skava/ui/dist/components/organisms/ExpandableCard'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { wording } from '@skava/ui/dist/words'
import { StatusDetails } from '../StatusDetails'
import { EditUser } from '../Form'
import { StatusDetailCardProps } from './typings'
import { StyledButtonWithIcon } from './styled'

function defaultRenderButton(props: StatusDetailCardProps, state?: CardState) {
  const renderEditView = () => {
    const iconLabel = state.isExpanded ? wording.close : wording.edit
    const arrow = state.isExpanded ? 'up' : 'down'
    return (
      <React.Fragment>
        {iconLabel} <MaterialIcon type={arrow} />
      </React.Fragment>
    )
  }
  return <StyledButtonWithIcon renderChildren={renderEditView} />
}

function defaultRenderForm(props: StatusDetailCardProps, state?: CardState) {
  const handleCancel = () => {
    state.handleToggle()
  }
  return <EditUser onCancel={handleCancel} />
}

function defaultRenderDetail(props: StatusDetailCardProps) {
  return <StatusDetails {...props} />
}

export { defaultRenderButton, defaultRenderForm, defaultRenderDetail }