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

function defaultRenderToggleButton(
  props: InformationCardProps,
  state: CardState
) {
  // @note was props.state for some reason (huh)
  const headerToggleButtonView =
    state.isExpanded === false ? (
      <CustomToggleButton onClick={state.handleToggle} text="Edit" />
    ) : (
      <Empty />
    )
  return <React.Fragment>{headerToggleButtonView}</React.Fragment>
}
/**
 * @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 <Wrapper className={className}>{children}</Wrapper>
}
export {
  defaultRenderToggleButton,
  defaultRenderExpandedView,
  defaultRenderWrapper,
}