import React from 'react'
import { CardState, ExpandableCard } from 'organisms/ExpandableCard'
import { StatusDetailCardProps } from './typings'
import {
  defaultRenderToggleButton,
  defaultRenderButton,
  defaultRenderForm,
  defaultRenderDetail,
  defaultRenderWrapper,
} from './renderProps'

class StatusDetailCard extends React.PureComponent<
  StatusDetailCardProps,
  CardState
  > {
  static defaultProps = {
    className: '',
    // render props
    renderDetail: defaultRenderDetail,
    renderForm: defaultRenderForm,
    renderButton: defaultRenderButton,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const {
      renderForm,
      renderDetail,
      renderWrapper,
      ...remainingProps
    } = this.props
    return (
      <ExpandableCard
        renderDefaultView={renderDetail}
        renderExpandedView={renderForm}
        renderToggleButton={defaultRenderToggleButton}
        renderWrap={renderWrapper}
        {...remainingProps}
      />
    )
  }
}

export { StatusDetailCard }
export default StatusDetailCard