import React from 'react'
import { CommonState } from '@skava/ui/dist/state'
import { isSafe } from 'exotic'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { Address, StyledTitle, StyledAddress, } from 'presets/Address'
import { ActionButtonGroup, ActionButtonGroupProps } from '../ActionButtonGroup'
import { PaymentSummaryProps } from './typings'
import { InfoHeading, InfoDec, AddressInfoPanel, ShippingMethodInfoPanel, PaymentMethodInfoPanel, StyledProductOrderSummary } from './styled'

function defaultRenderInfoItem(item: Object, isSubscriptionItem: boolean) {
  const { label, value } = item
  return (
    <React.Fragment>
      <InfoHeading isSubscriptionItem={isSubscriptionItem} content={label} breedType="h4" />
      <InfoDec isSubscriptionItem={isSubscriptionItem} content={value} />
    </React.Fragment>
  )
}

/**
 * render shipping address
 */
const createRenderProps = (data: AddressType) => {
  const renderTitle = (props: AddressPresetProps) => {
    return <StyledTitle breedType="h3" content={data.label} />
  }
  const renderAddress = (props: AddressPresetProps) => {
    return <StyledAddress address={data} />
  }

  return {
    renderTitle,
    renderAddress,
  }
}

function defaultRenderShippingAddress(props: PaymentSummaryProps) {
  // return <AddressInfoPanel>{defaultRenderInfoItem(props.shippingAddressInfo)}</AddressInfoPanel>
  const { shippingAddressInfo, isSubscriptionItem } = props
  const { renderTitle, renderAddress } = createRenderProps(shippingAddressInfo)
  const attributes = {
    renderTitle,
    renderAddress,
  }
  return (
    <AddressInfoPanel isSubscriptionItem={isSubscriptionItem}>
      <Address {...attributes} />
    </AddressInfoPanel>
  )
}

/**
 * render shipping method
 */
function defaultRenderShippingMethod(props: PaymentSummaryProps) {
  const { shippingMethodInfo, isSubscriptionItem } = props
  return <ShippingMethodInfoPanel isSubscriptionItem={isSubscriptionItem}>{defaultRenderInfoItem(shippingMethodInfo, isSubscriptionItem)}</ShippingMethodInfoPanel>
}

/**
 * render payment method
 */
function defaultRenderPaymentMethod(props: PaymentSummaryProps) {
  const { paymentMethodInfo, isSubscriptionItem } = props
  return isSafe(paymentMethodInfo) ? <PaymentMethodInfoPanel isSubscriptionItem={isSubscriptionItem} isPaymentMethod={true}>{defaultRenderInfoItem(paymentMethodInfo, isSubscriptionItem)}</PaymentMethodInfoPanel> : <Empty />
}

/**
 * render product order summary
 */
function defaultRenderOrderSummary(props: PaymentSummaryProps) {
  const { isSubscriptionItem } = props
  const { list, title } = props.orderSummaryInfo
  return (
    <React.Fragment>
      <StyledProductOrderSummary isSubscriptionItem={isSubscriptionItem} title={title} list={list} />
    </React.Fragment>
  )
}

export {
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderPaymentMethod,
  defaultRenderOrderSummary,
}