import React from 'react'
import { Empty } from 'atoms/Empty'
import { omit } from 'uxui-modules/utils/omit'
import { CardProps } from './typings'
import { ExpandableState as CardState } from './State'
import {
  CardWrapper,
  ToggleButton,
  DefaultWrapperView,
  ExpandedWrapperView,
} from './styled'

const knownProps = Object.freeze([
  'children',
  'renderWrap',
  'renderToggleButton',
  'renderDefaultView',
  'renderExpandedView',
])

/**
 * @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 { children, nowrap, ...remainingProps } = props
  if (nowrap === true) {
    return <React.Fragment>{children}</React.Fragment>
  } else {
    return <CardWrapper {...remainingProps}>{children}</CardWrapper>
  }
}

export { renderWrap, renderToggleButton, renderDefaultView, renderExpandedView }