import React from 'react'
import { isFunction } from 'exotic'
import { wording } from 'src/words'
import { ProductDetails } from '../ProductDetails'
import { SubscriptionDetailsPageProps } from './typings'
import {
  ProductImage,
  InformationBox,
  Wrapper,
  DeliveryDateContainer,
  DeilveryDateLabel,
  DeliveryDateWrapper,
  DeliveryDateText,
  ChangeDateLabel,
  StyledProductDetails,
  StyledConfirmSubscription,
  StyledCancel,
  StyledShippingAddressCard,
  StyledPaymentInformationCard,
} from './styled'

function defaultRenderProductImage(props: SubscriptionDetailsPageProps) {
  const { item } = props
  const { imageURL } = item
  return <ProductImage src={imageURL} />
}

function defaultRenderProductDetails(props: SubscriptionDetailsPageProps) {
  const { productDetailsItem, ...remainingProps } = props
  return <StyledProductDetails item={productDetailsItem} {...remainingProps} />
}

function defaultRenderShippingAddressCard(props: SubscriptionDetailsPageProps) {
  const { ShippingAddressCardList, onShippingCardSave } = props
  return (
    <StyledShippingAddressCard
      list={ShippingAddressCardList}
      onShippingCardSave={onShippingCardSave}
    />
  )
}

function defaultRenderPaymentInformationCard(
  props: SubscriptionDetailsPageProps
) {
  const { paymentInformationCardList, onPaymentCardSave } = props
  return (
    <StyledPaymentInformationCard
      list={paymentInformationCardList}
      onPaymentCardSave={onPaymentCardSave}
    />
  )
}

function defaultRenderExpectedDelivery(props: SubscriptionDetailsPageProps) {
  const { onChangeDate } = props
  const handleOnClick = (event: Event) => {
    console.log('Change Date Clicked')
    if (isFunction(onChangeDate)) {
      const args = { event }
      onChangeDate(args)
    }
  }
  return (
    <DeliveryDateContainer>
      <DeilveryDateLabel content={wording.expectedDeliveryDateLabel} />
      <DeliveryDateWrapper>
        <DeliveryDateText breedType="h3" content="Tuesday, August 22" />
        <ChangeDateLabel content="Change date" onClick={handleOnClick} />
      </DeliveryDateWrapper>
    </DeliveryDateContainer>
  )
}

function defaultRenderButtons(props: SubscriptionDetailsPageProps) {
  const { onConfirmSubmission, onCancel } = props

  const handleConfirmSubmission = (event: Event) => {
    if (isFunction(onConfirmSubmission)) {
      const changeArgs = { event }
      onConfirmSubmission(changeArgs)
    }
  }
  const handleCancel = (event: Event) => {
    if (isFunction(onCancel)) {
      const changeArgs = { event }
      onCancel(changeArgs)
    }
  }
  return (
    <React.Fragment>
      <StyledConfirmSubscription
        text={wording.confirmSubscription}
        onClick={handleConfirmSubmission}
      />
      <StyledCancel text={wording.cancel} onClick={handleCancel} />
    </React.Fragment>
  )
}

function defaultRenderBox(props: SubscriptionDetailsPageProps) {
  const {
    renderProductImage,
    renderProductDetails,
    renderShippingAddressCard,
    renderPaymentInformationCard,
    renderExpectedDelivery,
    renderButtons,
    //
    ...remainingProps
  } = props

  return (
    <React.Fragment>
      {renderProductImage(remainingProps)}
      <InformationBox>
        {renderProductDetails(remainingProps)}
        {renderShippingAddressCard(remainingProps)}
        {renderPaymentInformationCard(remainingProps)}
        {renderExpectedDelivery(remainingProps)}
        {renderButtons(remainingProps)}
      </InformationBox>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: SubscriptionDetailsPageProps) {
  const { className, children } = props
  return <Wrapper className={className}>{children}</Wrapper>
}

export {
  defaultRenderProductImage,
  defaultRenderProductDetails,
  defaultRenderShippingAddressCard,
  defaultRenderPaymentInformationCard,
  defaultRenderExpectedDelivery,
  defaultRenderButtons,
  defaultRenderBox,
  defaultRenderWrapper,
}