import React from 'react'
import { CardState } from 'organisms/ExpandableCard'
import { TextPlaceholder } from 'atoms/Placeholder'
import { StatusDetails } from '../StatusDetails'
import { EditUser } from '../Form'
import { StatusDetailCardProps } from './typings'
import { ToggleButton, Wrapper } from './styled'

function defaultRenderButton(props: StatusDetailCardProps, state?: CardState) {
  return <TextPlaceholder width={'60'} height={'12'} />
}

function defaultRenderToggleButton(props: StatusDetailCardProps, state?: CardState) {
  const { renderButton } = props
  return <ToggleButton onClick={state.handleToggle}>{renderButton(props, state)}</ToggleButton>
}

function defaultRenderForm(props: StatusDetailCardProps, state?: CardState) {
  return <EditUser />
}

function defaultRenderDetail(props: StatusDetailCardProps, state?: CardState) {
  return <StatusDetails {...props} />
}

function defaultRenderWrapper(props: StatusDetailCardProps, state?: CardState) {
  const { children } = props
  return <Wrapper isExpanded={state.isExpanded}>{children}</Wrapper>
}

export {
  defaultRenderToggleButton,
  defaultRenderButton,
  defaultRenderForm,
  defaultRenderDetail,
  defaultRenderWrapper,

}