import React from 'react'
import { isObj } from 'exotic'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { application } from '@skava/state'
import { wording } from 'src/words'
import { StyledDetailedList, StyledButtonWithIcon } from './styled'
import { OrderStatusProps } from './typings'

function defaultRenderOrderStatus(props: OrderStatusProps) {
  const { orderStatusConfig } = props
  return <StyledDetailedList list={orderStatusConfig} />
}

function defaultRenderPrintIcon(props: OrderStatusProps) {
  return <MaterialIcon type={'print_icon'} data-qa={'qa-order-history-print'} />
}

function defaultRenderOrderDetails(props: OrderStatusProps) {
  const { state } = props
  const iconType = isObj(state) && state.isExpanded ? wording.up : wording.down
  const handleClick = isObj(state) === true ? state.handleToggle : false
  const text = application.isDesktop ? 'Order details' : 'details'
  return (
    <StyledButtonWithIcon
      iconAlignType={'suffix'}
      text={text}
      iconType={iconType}
      onClick={handleClick}
    />
  )
}

export {
  defaultRenderOrderDetails,
  defaultRenderOrderStatus,
  defaultRenderPrintIcon,
}