import React from 'react'
import { omit } from '@skava/utils'
import { wording } from 'src/words'
import { CardState } from 'organisms/ExpandableCard'
import { DeliveryInstructionProps } from './typings'
import { StyledToggleItem, StyledCommentBox } from './styled'

function defaultRenderToggleButton(
  props: DeliveryInstructionProps,
  state: CardState
) {
  const { isSelected } = props
  const { handleToggle } = state
  return (
    <StyledToggleItem
      iconType={'checkbox'}
      label={wording.deliveryInstruction}
      onToggle={handleToggle}
      bgColor={'var(--color-blue)'}
      isSelected={isSelected}
    />
  )
}

function defaultRenderExpandedView(
  props: DeliveryInstructionProps,
  state: CardState
) {
  const passThroughProps = omit(props, ['className', 'data-qa'])
  return <StyledCommentBox {...passThroughProps} />
}

export { defaultRenderToggleButton, defaultRenderExpandedView }