import React from 'react'
import { isSafe } from 'exotic'
import Empty from 'atoms/Empty'
import { ArrowIcon } from 'atoms/Icons/ArrowIcon'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'
import { DetailedListDataType } from 'molecules/DetailedList/typings'
import { defaultRenderOrderStatus as abstractionsRenderOrderStatus } from 'abstractions/Order/OrderStatus'
import { OrderStatusProps } from './typings'
import { StyledDetailedList, StyledButton } from './styled'

/**
 * render arrow
 */
function renderIconItem(props: OrderStatusProps) {
  return <ArrowIcon down />
}
/**
 * render button
 */
function defaultRenderActionButton(props: OrderStatusProps) {
  const { isSubscriptionItem } = props
  return (
    <StyledButton
      breedType="icon-with-text"
      iconAlignType="suffix"
      text=" "
      renderIcon={renderIconItem}
      onClick={isSafe(props.state) ? props.state.handleToggle : ''}
      isSubscriptionItem={isSubscriptionItem}
    />
  )
}

/**
 * rendering the empty component
 */
function renderEmpty() {
  return <Empty />
}

/**
 * used to render the content
 */
function defaultRenderOrderStatus(props: OrderStatusProps) {
  const { orderStatusData, isSubscriptionItem } = props
  return (
    <StyledDetailedList
      list={orderStatusData}
      isSubscriptionItem={isSubscriptionItem}
      renderDetailedListHeading={renderEmpty}
    />
  )
}

export { defaultRenderActionButton, defaultRenderOrderStatus }