import React from 'react'
import { CheckoutCartBundle } from 'presets/BundleProduct'
import {
  StyledQuantity,
  StyledTotalPrice,
  StyledProduct,
} from 'presets/BundleProduct/CheckoutCartBundle/ProductItem'
import { ItemPriceBox } from 'abstractions/BundleProduct'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard/typings'
import { Header } from './styled'
import { CheckoutCartBundleProps } from './typings'

const renderHeader = (
  props: CheckoutCartBundleProps,
  state: AnimatedCardState
) => {
  return (
    <Header isExpanded={state.isExpanded}>
      {'I am the renderProp to override renderHeader()'}
      <button style={{ marginLeft: '20px' }} onClick={state.handleToggle}>
        {'click to expand'}
      </button>
    </Header>
  )
}

const renderProduct = () => {
  return (
    <StyledProduct>
      {'I am the renderProp to override renderProduct()'}
    </StyledProduct>
  )
}

const renderQuantity = () => {
  return (
    <StyledQuantity>
      {'I am the renderProp to override renderQuantity()'}
    </StyledQuantity>
  )
}

const renderPrice = () => {
  return (
    <ItemPriceBox>
      {'I am the renderProp to override renderPrice()'}
    </ItemPriceBox>
  )
}

const renderTotalPrice = () => {
  return (
    <StyledTotalPrice>
      {'I am the renderProp to override renderTotalPrice()'}
    </StyledTotalPrice>
  )
}

class CheckoutCartBundleThemed extends React.Component {
  render() {
    const attributes = {
      renderQuantity,
      renderPrice,
      renderTotalPrice,
      renderHeader,
      renderProduct,
    }
    return <CheckoutCartBundle {...this.props} {...attributes} />
  }
}

export { CheckoutCartBundleThemed }
export default { CheckoutCartBundleThemed }