import React from 'react'
import { Empty } from 'atoms/Empty'
import { CardState } from 'organisms/ExpandableCard'
import { DeliveryInstructionProps } from './typings'
import {
  ToggleItemWrapper,
  StyledCheckBox,
  StyledTextBox,
  StyledCommentBox,
  ButtonGroup,
  StyledTextArea,
  StyledButton,
} from './styled'

function defaultRenderToggleButton(
  props: DeliveryInstructionProps,
  state: CardState
) {
  const { handleToggle } = state
  return (
    <ToggleItemWrapper>
      <StyledCheckBox width="20" height="20" onClick={handleToggle} />
      <StyledTextBox width="200" height="16" />
    </ToggleItemWrapper>
  )
}

function defaultRenderExpandedView(
  props: DeliveryInstructionProps,
  state: CardState
) {
  return (
    <StyledCommentBox>
      <StyledTextArea height="150" />
      <ButtonGroup>
        <StyledButton height="44" />
        <StyledButton height="44" />
      </ButtonGroup>
    </StyledCommentBox>
  )
}

function defaultRenderDefaultView(
  props: DeliveryInstructionProps,
  state: CardState
) {
  return <Empty />
}

export {
  defaultRenderToggleButton,
  defaultRenderExpandedView,
  defaultRenderDefaultView,
}