import React from 'react'
import { StatusDetailCardProps } from './typings'
import { CardState } from 'organisms/ExpandableCard'
import { ArrowIcon } from 'atoms/Icons'
import { wording } from 'src/words'
import { StatusDetails } from '../StatusDetails'
import { EditUser } from '../Form'
import { StyledButtonWithIcon } from './styled'

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

function defaultRenderForm(props: StatusDetailCardProps) {
  return <EditUser />
}

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

export {
  defaultRenderButton,
  defaultRenderForm,
  defaultRenderDetail,
}