import React from 'react'
import {
  CardWrapper,
  CustomExpandedWrapperView,
  CustomToggleButton,
} from './styled'
import { InformationCardProps } from './typings'
import { ExpandableCard, CardState } from 'organisms/ExpandableCard'

function defaultRenderToggleButton(props: InformationCardProps, state: CardState) {
  // @note was props.state for some reason (huh)
  return <CustomToggleButton onClick={state.handleToggle} text="Edit" />
}
/**
 * @description the Expandable view of the card
 */
function defaultRenderExpandedView(props: InformationCardProps, state: CardState) {
  return <CustomExpandedWrapperView className="open-view">Form View!</CustomExpandedWrapperView>
}

function renderExpandableCardDetails(props: InformationCardProps) {
  return <ExpandableCard {...props} />
}

function defaultRenderWrapper(props: InformationCardProps) {
  const { className, ...remainingProps } = props
  const children = renderExpandableCardDetails(remainingProps)
  return <CardWrapper className={className}>{children}</CardWrapper>
}
export { 
  defaultRenderToggleButton, 
  defaultRenderExpandedView,
  defaultRenderWrapper
}