import React from 'react'
import { ParagraphPlaceholder, RectanglePlaceholder } from 'atoms/Placeholder'
import { ProductDetailsProps } from './typings'
import {
  ProductInformationWrapper,
  ProductSkuIdWrapper,
  StyledProductInfo,
  ProductPrice,
  ProductDetailsWrapper,
  StyledRectangularPlaceholder,
  ProductOptions,
  ProductQuantityWrapper,
  ProductOptionsWrapper,
  StyledHeading,
  FrequencyWrapper,
  Wrapper,
} from './styled'

function defaultRenderTitle(props: ProductDetailsProps) {
  return <StyledProductInfo width={500} />
}

function defaultRenderSkuId(props: ProductDetailsProps) {
  return <StyledProductInfo width={250} />
}

function defaultRenderPrice(props: ProductDetailsProps) {
  return <ProductPrice width={100} height={28} />
}

function defaultRenderProductDetails(props: ProductDetailsProps) {
  return (
    <React.Fragment>
      <StyledHeading width={150} height={22} />
      <ParagraphPlaceholder width={450} height={28} rows={3} />
    </React.Fragment>
  )
}

function defaultRenderProductOptions(props: ProductDetailsProps) {
  return (
    <React.Fragment>
      <StyledHeading width={150} height={22} />
      <ProductOptions>
        <StyledRectangularPlaceholder width={100} height={50} />
        <StyledRectangularPlaceholder width={100} height={50} />
        <StyledRectangularPlaceholder width={100} height={50} />
        <StyledRectangularPlaceholder width={100} height={50} />
      </ProductOptions>
    </React.Fragment>
  )
}

function defaultRenderProductQuantity(props: ProductDetailsProps) {
  return (
    <React.Fragment>
      <StyledHeading width={150} height={22} />
      <RectanglePlaceholder width={100} height={40} />
    </React.Fragment>
  )
}

function defaultRenderFrequency(props: ProductDetailsProps) {
  return (
    <React.Fragment>
      <StyledHeading width={150} height={22} />
      <RectanglePlaceholder width={470} height={32} />
    </React.Fragment>
  )
}

function defaultRenderBox(props: ProductDetailsProps) {
  const {
    renderTitle,
    renderSkuId,
    renderPrice,
    renderProductDetails,
    renderProductOptions,
    renderProductQuantity,
    renderFrequency,
    renderSubscriptionEnds,
    ...remainingProps
  } = props

  return (
    <React.Fragment>
      <ProductInformationWrapper>
        {renderTitle(remainingProps)}
        <ProductSkuIdWrapper>{renderSkuId(remainingProps)}</ProductSkuIdWrapper>
        {renderPrice(remainingProps)}
      </ProductInformationWrapper>
      <ProductDetailsWrapper>
        {renderProductDetails(remainingProps)}
      </ProductDetailsWrapper>
      <ProductOptionsWrapper>
        {renderProductOptions(remainingProps)}
      </ProductOptionsWrapper>
      <ProductQuantityWrapper>
        {renderProductQuantity(remainingProps)}
      </ProductQuantityWrapper>
      <FrequencyWrapper>{renderFrequency(remainingProps)}</FrequencyWrapper>
    </React.Fragment>
  )
}

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

export {
  defaultRenderTitle,
  defaultRenderSkuId,
  defaultRenderPrice,
  defaultRenderProductDetails,
  defaultRenderProductOptions,
  defaultRenderProductQuantity,
  defaultRenderFrequency,
  defaultRenderBox,
  defaultRenderWrapper,
}