import React from 'react'
import { isSafe } from 'exotic'
import { ApprovalStatusProps } from './typings'
import {
  ToggleButton,
  StyledOrderInformation,
  StyledUserInformation,
  StyledHeading,
  Wrapper,
} from './styled'

// rendering the button
function defaultRenderButton(props: ApprovalStatusProps) {
  const handleState = isSafe(props.state) && props.state.handleToggle
  return <ToggleButton onClick={handleState} />
}

// rendering the order Information
function defaultRenderOrderInformation(props: ApprovalStatusProps) {
  return (
    <React.Fragment>
      <StyledHeading />
      <StyledOrderInformation />
      <StyledOrderInformation />
      <StyledOrderInformation />
    </React.Fragment>
  )
}

// rendering the user Information
function defaultRenderUserInformation(props: ApprovalStatusProps) {
  return (
    <React.Fragment>
      <StyledHeading />
      <StyledUserInformation />
      <StyledUserInformation />
      <StyledUserInformation />
    </React.Fragment>
  )
}

// rendering the main wrapper
function defaultRenderWrapper(props: ApprovalStatusProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderButton,
  defaultRenderOrderInformation,
  defaultRenderUserInformation,
  defaultRenderWrapper,
}