import React from 'react'
import { CirclePlaceholder, TextPlaceholder } from 'atoms/Placeholder'
import { ProductDetailsProps } from './typings'
import {
  ProductTitle,
  ProductPrice,
  ProductOptions,
  ProductQuantity,
  ProductOptionsBox,
  StyledHeading,
  FrequencyDropDown,
  StyledFrequency,
  RadioOption,
  StyledDate,
  SubscriptionEnds,
  Wrapper
} from './styled'

function defaultRenderTitle(props: ProductDetailsProps) {
  return <ProductTitle width={300} />
}

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

function defaultRenderProductOptions(props: ProductDetailsProps) {
  return <ProductOptions width={200} height={20} />
}

function defaultRenderProductQuantity(props: ProductDetailsProps) {
  return <ProductQuantity width={100} height={20} />
}

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

function defaultRenderSubscriptionEnds(props: ProductDetailsProps) {
  return (
    <React.Fragment>
      <StyledHeading width={150} />
      <RadioOption>
        <CirclePlaceholder width={20} height={20} style={{marginRight : '8px'}} />
        <TextPlaceholder width={70} height={20} />
      </RadioOption>
      <RadioOption>
        <CirclePlaceholder width={20} height={20} style={{marginRight : '8px'}} />
          <TextPlaceholder width={70} height={20} />
          <StyledDate width={100} height={32} />
        </RadioOption>
    </React.Fragment>
  )
}

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

  return (
    <React.Fragment>
      {renderTitle(remainingProps)}
      {renderPrice(remainingProps)}
      <ProductOptionsBox>
        {renderProductOptions(remainingProps)}
        {renderProductQuantity(remainingProps)}
      </ProductOptionsBox>
      <StyledFrequency>{renderFrequency(remainingProps)}</StyledFrequency>
      <SubscriptionEnds>{renderSubscriptionEnds(remainingProps)}</SubscriptionEnds>
    </React.Fragment>
  )
}

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

export {
  defaultRenderTitle,
  defaultRenderPrice,
  defaultRenderProductOptions,
  defaultRenderProductQuantity,
  defaultRenderFrequency,
  defaultRenderSubscriptionEnds,
  defaultRenderBox,
  defaultRenderWrapper
}