import React from 'react'
import { CardState, ExpandableCard } from '@skava/ui/dist/components/organisms/ExpandableCard'
import { SubscriptionOrderInformation } from '../SubscriptionOrderInformation'
import { ProductItem } from '../ProductItem'
import { MySubscriptionProps } from './typings'
import {
  Wrapper,
  ButtonWrapper,
  StyledTextLink,
  ProductDetailsWrapper,
  ButtonDetailWrapper,
  OrderDetailWrapper,
  ProductItemWrapper,
  ManageButton,
  StyledOrderStatus,
  StyledExpandableCard,
} from './styled'

function defaultRenderDefaultView(props: MySubscriptionProps) {
  return (
    <StyledTextLink height={42} />
  )
}

function defaultRenderExpandedView(props: MySubscriptionProps, state?: CardState) {
  return (
    <React.Fragment>
      <StyledTextLink height={42} />
      <StyledTextLink height={42} />
      <StyledTextLink height={42} />
      <StyledTextLink height={42} />
    </React.Fragment>
  )
}

function defaultRenderToggleButton(props: MySubscriptionProps, state?: CardState) {
  return <ManageButton width={190} height={16} onClick={state.handleToggle}/>
}

function defaultRenderExpandableCard(props: MySubscriptionProps) {
  const {
    renderDefaultView,
    renderExpandedView,
    renderToggleButton,
    ...remainingProps
  } = props
  return (
    <ExpandableCard
      renderDefaultView={renderDefaultView}
      renderExpandedView={renderExpandedView}
      renderToggleButton={renderToggleButton}
      {...remainingProps}
    />)
}

function defaultRenderProductItem(props: MySubscriptionProps) {
  return <ProductItem />
}

function defaultRenderOrderDetails(props: MySubscriptionProps) {
  return <SubscriptionOrderInformation />
}

function defaultRenderOrderStatus(props: MySubscriptionProps) {
  return <StyledOrderStatus />
}

function defaultRenderBox(props: MySubscriptionProps) {
  const {
    renderOrderStatus,
    renderOrderDetails,
    renderProductItem,
    renderExpandableCard,
    renderSubscriptionDetailList,
    ...remainingProps
  } = props

  const statusView = renderOrderStatus(remainingProps)
  const orderDetailsView = renderOrderDetails(remainingProps)
  const productItemView = renderProductItem(remainingProps)
  const expandableCardView = renderExpandableCard(remainingProps)

  return (
    <React.Fragment>
      <ProductDetailsWrapper>
        {statusView}
        <OrderDetailWrapper>{orderDetailsView}</OrderDetailWrapper>
        <ProductItemWrapper>{productItemView}</ProductItemWrapper>
      </ProductDetailsWrapper>
      <StyledExpandableCard>
        {expandableCardView}
      </StyledExpandableCard>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: MySubscriptionProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderOrderStatus,
  defaultRenderOrderDetails,
  defaultRenderProductItem,
  defaultRenderDefaultView,
  defaultRenderExpandedView,
  defaultRenderToggleButton,
  defaultRenderExpandableCard,
  defaultRenderBox,
  defaultRenderWrapper,
}