import React from 'react'
import { wording } from 'src/words'
import { isFunction } from 'exotic'
import { ManageSubscriptionPageProps } from './typings'
import {
  BuyNowButton,
  SaveSubscriptionButton,
  SkipButton,
  CancelSubscriptionButton,
  SubscriptionText,
  LastDayToUpdateOrder,
  SubscriptionTextWrapper,
  StyledProductPrice,
  DeliveryDateContainer,
  DeliveryDateWrapper,
  DeilveryDateLabel,
  DeliveryDateText,
  ChangeDateLabel,
  DeliverDate,
} from './styled'

function defaultRenderPrice(props: ManageSubscriptionPageProps) {
  const { item } = props
  const { regPrice, salePrice } = item
  return <StyledProductPrice regularPrice={regPrice} salePrice={salePrice} />
}

function defaultRenderButtons(props: ManageSubscriptionPageProps) {
  const { onBuyNow, onSaveSubscription, onSkip, onCancelSubscription } = props

  const handleBuyNow = (event: Event) => {
    if (isFunction(onBuyNow)) {
      const changeArgs = { event }
      onBuyNow(changeArgs)
    }
  }
  const handleSaveSubscription = (event: Event) => {
    if (isFunction(onSaveSubscription)) {
      const changeArgs = { event }
      onSaveSubscription(changeArgs)
    }
  }
  const handleSkip = (event: Event) => {
    if (isFunction(onSkip)) {
      const changeArgs = { event }
      onSkip(changeArgs)
    }
  }
  const handleCancelSubscription = (event: Event) => {
    if (isFunction(onCancelSubscription)) {
      const changeArgs = { event }
      onCancelSubscription(changeArgs)
    }
  }
  return (
    <React.Fragment>
      <BuyNowButton text={wording.buyButtonLabel} onClick={handleBuyNow} />
      <SaveSubscriptionButton text={wording.saveSubscriptionLabel} onClick={handleSaveSubscription} />
      <SkipButton text={wording.skipButtonLabel} onClick={handleSkip} />
      <CancelSubscriptionButton
        text={wording.cancelSubscription}
        onClick={handleCancelSubscription}
      />
    </React.Fragment>
  )
}

function defaultRenderExpectedDelivery(props: ManageSubscriptionPageProps) {
  const { item } = props
  const { deliveryDate } = item
  return (
    <DeliverDate>
      <SubscriptionTextWrapper>
        <SubscriptionText>{wording.lastDayToUpdateLabel}</SubscriptionText>
        <LastDayToUpdateOrder>{deliveryDate}</LastDayToUpdateOrder>
      </SubscriptionTextWrapper>
      <DeliveryDateContainer>
        <DeilveryDateLabel content={wording.expectedDeliveryDateLabel} />
        <DeliveryDateWrapper>
          <DeliveryDateText breedType="h3" content="Tuesday, August 22" />
          <ChangeDateLabel content="Change date" />
        </DeliveryDateWrapper>
      </DeliveryDateContainer>
    </DeliverDate>
  )
}
export {
  defaultRenderButtons,
  defaultRenderPrice,
  defaultRenderExpectedDelivery,
}