import React from 'react'
import { ProductDetails } from '../ProductDetails'
import { SubscriptionDetailsProps } from './typings'
import { ProductImage, InformationBox, Wrapper, DeliveryDateContainer, DeilveryDateLabel, DeliveryDateWrapper, DeliveryDateText, ChangeDateLabel} from './styled'

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

function defaultRenderProductDetails(props: SubscriptionDetailsProps) {
  const { productDetailsItem } = props
  return <ProductDetails item={productDetailsItem} />
}

function defaultRenderShippingAddressCard(props: SubscriptionDetailsProps) {
  const {} = props
  return ''
}

function defaultRenderPaymentInformationCard(props: SubscriptionDetailsProps) {
  const {} = props
  return ''
}

function defaultRenderExpectedDeliveryDateInfo(props: SubscriptionDetailsProps) {
  const {onChangeDate} = props
  const handleOnClick = () => {
    console.log('Change Date Clicked')
    onChangeDate();
  }
  return (
    <DeliveryDateContainer>
      <DeilveryDateLabel content="Expected delivery date" />
      <DeliveryDateWrapper>
        <DeliveryDateText breedType="h3" content="Tuseday, August 22"/>
        <ChangeDateLabel content="Change date" onClick={handleOnClick} />
      </DeliveryDateWrapper>
    </DeliveryDateContainer>
  )
}

function defaultRenderButtons(props: SubscriptionDetailsProps) {
  const {} = props
  return ''
}

function defaultRenderBox(props: SubscriptionDetailsProps) {
  const {
    renderProductImage,
    renderProductDetails,
    renderShippingAddressCard,
    renderPaymentInformationCard,
    renderExpectedDeliveryDateInfo,
    renderButtons,
    //
    imageURL,
    productDetailsItem,
    ...remainingProps
  } = props

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

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

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