import React from 'react'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'
import { AddPaymentProps } from './typings'
import {
  StyledPaymentWithBillingAddress,
  StyledToggleButton,
  StyledToggleIcon,
  StyledHeading,
  StyledHeadingWrapper,
  Wrapper,
} from './styled'

function defaultRenderHeaderView(
  props: AddPaymentProps,
  state: AnimatedCardState
) {
  const { handleToggle } = state
  const view = (
    <StyledHeadingWrapper>
      <StyledHeading />
      <React.Fragment>
        <StyledToggleButton onClick={handleToggle} />
        <StyledToggleIcon onClick={handleToggle} />
      </React.Fragment>
    </StyledHeadingWrapper>
  )
  return view
}

function defaultRenderExpandedView(
  props: AddPaymentProps,
  state: AnimatedCardState
) {
  const view = <StyledPaymentWithBillingAddress />
  return view
}

function defaultRenderFooterView(
  props: AddPaymentProps,
  state: AnimatedCardState
) {
  return <Empty />
}

function defaultRenderWrapper(props: AddPaymentProps, state: AnimatedCardState) {
  const { children, ...remainingProps } = props

  return (
    <Wrapper {...remainingProps} isExpanded={state.isExpanded}>
      {children}
    </Wrapper>
  )
}

export {
  defaultRenderHeaderView,
  defaultRenderExpandedView,
  defaultRenderFooterView,
  defaultRenderWrapper,
}