import React from 'react'
import Empty from 'atoms/Empty'
import { CommonState } from 'src/state'
import { ActionButtonGroupProps } from 'presets/Order/ActionButtonGroup'
import { AnimatedCardProps, AnimatedCardState } from 'presets/AnimatedExpandableCard'
import CancelReturnForm from './CancelReturnForm'
import { defaultRenderProductItem } from './ProductItemList/renderProps'
import { OrderPresetProps } from './typings'
import {
  StyledOrderStatus,
  StyledPaymentSummary,
  StyledProductItemList,
  StyledPrimaryButton,
  StyledSecondaryButton
} from './styled'

function defaultRenderStatus(props: OrderPresetProps, state: AnimatedCardState) {
  /**
   * @todo need to be passed only the required values not as entire props
   */
  const { orderStatusData, isSubscriptionItem, ...remainingProps } = props
  return <StyledOrderStatus isSubscriptionItem={isSubscriptionItem} orderStatusData={orderStatusData} state={state} />
}

function defaultRenderPaymentSummary(props: OrderPresetProps) {
  const { isSubscriptionItem } = props
  return <StyledPaymentSummary isSubscriptionItem={isSubscriptionItem}  {...props} />
}

function defaultRenderProductItemList(props: OrderPresetProps, state?: AnimatedCardState) {
  // @note - this is so that we don't pass state from ExpandableCard
  // not sure why we are passing ExpandableCardState in props
  // that is why we!!!!!!
  // const { state, isVisible, isActive, isFocused, ...remainingProps } = props

  /**
   * @todo need to be passed only the required values not as entire props
   */
  // console.debug('[Presets/Order] defaultRenderProductItemList(): ')
  // console.dir(props)
  // console.dir(state)
  const { list, renderProductItem, isSubscriptionItem, ...remainingProps } = props
  return <StyledProductItemList list={list} state={state} renderProductItem={renderProductItem} isSubscriptionItem={isSubscriptionItem} />
}

// === order forms ===

/**
 * Renders the product order action button group 'Track package', 'Order again', 'Cancel'
 * @param props OrderPresetProps
 */
function defaultRenderOrderButtons(props: ActionButtonGroupProps, state: CommonState) {
  const { isSubscriptionItem } = props
  const view = (
    <React.Fragment>
      <StyledPrimaryButton isSubscriptionItem={isSubscriptionItem} width={'162px'} text={'primary'} onClick={state.toggleActive} />
      <StyledSecondaryButton width={'162px'} text={'secondary'} />
      <StyledSecondaryButton width={'162px'} text={'teritary'} />
    </React.Fragment>
  )
  return view
}
/**
 * Renders the product order button click form
 * @param {OrderPresetProps} props
 */
function defaultRenderOrderForm(props: ActionButtonGroupProps, state: CommonState) {
  return <CancelReturnForm state={state} />
}

export {
  defaultRenderStatus,
  defaultRenderPaymentSummary,
  defaultRenderProductItemList,
  //
  defaultRenderProductItem,
  //
  defaultRenderOrderButtons,
  defaultRenderOrderForm,
}