import React from 'react'
import { isFunction, isSafe, isObj } from 'exotic'
import { wording } from 'src/words'
import { CardState } from 'organisms/ExpandableCard'
import { ProductItem } from '../ProductItem'
import { SubscriptionOrderInformation } from '../SubscriptionOrderInformation'
import { MySubscriptionProps } from './typings'
import {
  StyledPrimaryButton,
  StyledSkipButton,
  StyledPauseButton,
  StyledCancelButton,
  StyledStatus,
  StyledToggleButton,
} from './styled'

enum orderStatus {
  'active' = '#0c8b44',
  'paused' = '#f79127',
  'skipped' = '#f79127',
  'canceled' = '#0c8b44',
}

function defaultRenderDefaultView(props: MySubscriptionProps) {
  const { onBuyNow } = props

  const handleBuyNowClick = (event: Event) => {
    if (isFunction(onBuyNow)) {
      onBuyNow(event)
    }
  }

  return (
    <StyledPrimaryButton
      text={wording.buyButtonLabel}
      onClick={handleBuyNowClick}
    />
  )
}

function defaultRenderExpandedView(props: MySubscriptionProps) {
  const { onBuyNow, onSkip, onPause, onCancel } = props

  const handleBuyNow = (event: Event) => {
    if (isFunction(onBuyNow)) {
      onBuyNow(event)
    }
  }
  const handleSkip = (event: Event) => {
    if (isFunction(onSkip)) {
      onSkip(event)
    }
  }
  const handlePause = (event: Event) => {
    if (isFunction(onPause)) {
      onPause(event)
    }
  }
  const handleCancel = (event: Event) => {
    if (isFunction(onCancel)) {
      onCancel(event)
    }
  }

  return (
    <React.Fragment>
      <StyledPrimaryButton
        text={wording.buyButtonLabel}
        onClick={handleBuyNow}
      />
      <StyledSkipButton text={wording.skipOneTimeLabel} onClick={handleSkip} />
      <StyledPauseButton text={' '} onClick={handlePause} />
      <StyledCancelButton text={' '} onClick={handleCancel} />
    </React.Fragment>
  )
}

function defaultRenderToggleButton(
  props: MySubscriptionProps,
  state?: CardState
) {
  const iconDirection = state.isExpanded ? wording.up : wording.down
  return (
    <StyledToggleButton
      text={wording.manageSubscription}
      onClick={state.handleToggle}
      breedType="icon-with-text"
      iconAlignType={'suffix'}
      iconType={'arrow'}
      direction={iconDirection}
    />
  )
}

function defaultRenderProductItem(props: MySubscriptionProps) {
  const { item } = props
  return <ProductItem item={item.productItemInfo} />
}

function defaultRenderOrderDetails(props: MySubscriptionProps) {
  const { item } = props
  return (
    <SubscriptionOrderInformation
      data-qa={'qa-subscription-current-status'}
      item={item.subscriptionInfo}
    />
  )
}

function defaultRenderOrderStatus(props: MySubscriptionProps) {
  const { item } = props
  const orderStatusLabel =
    isObj(item) && isSafe(item.orderStatus)
      ? item.orderStatus.toLowerCase()
      : ''
  return (
    isSafe(orderStatusLabel) && (
      <StyledStatus color={orderStatus[orderStatusLabel]}>
        {orderStatusLabel}
      </StyledStatus>
    )
  )
}

export {
  defaultRenderOrderDetails,
  defaultRenderProductItem,
  defaultRenderDefaultView,
  defaultRenderExpandedView,
  defaultRenderToggleButton,
  defaultRenderOrderStatus,
}