import React from 'react'
import Empty from 'atoms/Empty'
import { ToggleButton, CardProps, CardState } from 'src/components/organisms/ExpandableCard'
import { AnimatedCardProps, AnimatedCardState } from './typings'
import { HeaderWrapper, FooterWrapper, ExpandableCardWrapper } from './styled'

/**
 * header view
 */
function defaultRenderHeaderView(props: AnimatedCardProps, state: AnimatedCardState) {
  const headerView = (
    <HeaderWrapper>
      <div>Header View!</div>
      <div onClick={state.handleToggle}>Header Button</div>
    </HeaderWrapper>
  )
  return headerView
}

/**
 * expandable view
 */
function defaultRenderExpandableView(props: AnimatedCardProps, state: AnimatedCardState) {
  const expandableView = (
    <ExpandableCardWrapper>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
      <div>Expandable View!</div>
    </ExpandableCardWrapper>
  )
  return expandableView
}

/**
 * footer view
 */
function defaultRenderFooterView(props: AnimatedCardProps, state: AnimatedCardState) {
  const footerView = (
    <FooterWrapper>
      <div>Footer View!</div>
    </FooterWrapper>
  )
  return footerView
}

/**
 * Empty Toggle Button
 */
function defaultRenderToggleButton() {
  return <Empty />
}

export {
  defaultRenderToggleButton,
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
}