import React from 'react'
import { CardProps } from './typings'
import { ExpandableState as CardState } from './ExpandableCardState'
import {
  CardWrapper,
  ToggleButton,
  DefaultWrapperView,
  ExpandedWrapperView,
} from './styled'

/**
 * @description only renders toggle button
 */
function renderToggleButton(props: CardProps, state: CardState) {
  console.debug('[ExpandableCard] renderToggleButton')

  // @note was props.state for some reason (huh)
  return <ToggleButton onClick={state.handleToggle} text="toggle" />
}

/**
 * @description the first view of the Expandable card
 */
function renderDefaultView(props: CardProps, state: CardState) {
  return (
    <DefaultWrapperView className="def-view">Default View!</DefaultWrapperView>
  )
}

/**
 * @description the Expandable view of the card
 */
function renderExpandedView(props: CardProps, state: CardState) {
  return (
    <ExpandedWrapperView className="open-view">
      Expandable View!
    </ExpandedWrapperView>
  )
}

/**
 * @description only renders wrappers
 */
function renderWrap(props: CardProps, state: CardState) {
  const { className, children, nowrap } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  if (nowrap === true) {
    return <React.Fragment>{children}</React.Fragment>
  } else {
    return <CardWrapper {...passThroughProps}>{children}</CardWrapper>
  }
}

export { renderWrap, renderToggleButton, renderDefaultView, renderExpandedView }