import React from 'react'
import { ParagraphPlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { CommonState } from '@skava/ui/dist/state'
import { CancellationReturnForm } from 'presets/OrderHistory/CancellationReturnForm'
import { FlexColumn } from '../styled'
import { ProductItemProps } from './typings'
import {
  ProductDetailsWrapper,
  ItemPlaceholder,
  StyledDetailedList,
  StyledImagePlaceholder,
  StyledAddress,
  StyledHeading,
  StyledValue,
  StyledActionButton,
  ActionButtonWrapper,
  ShippingWrapper,
  ProductItemWrapper,
  OrderItemWrapper,
  ItemContainer,
  StatusWrapper,
} from './styled'

function defaultRenderProductDetails() {
  return (
    <React.Fragment>
      <StyledImagePlaceholder width={160} height={125} />
      <ProductDetailsWrapper>
        <ItemPlaceholder width={120} height={18} />
        <StyledDetailedList>
          <ItemPlaceholder width={60} height={18} />
          <ItemPlaceholder width={200} height={18} />
        </StyledDetailedList>
        <ItemPlaceholder width={100} height={18} />
        <ItemPlaceholder width={80} height={18} />
      </ProductDetailsWrapper>
    </React.Fragment>
  )
}

function defaultRenderShippingAddress() {
  return <StyledAddress />
}

function defaultRenderShippingMethod() {
  return (
    <FlexColumn>
      <StyledHeading width={200} height={18} />
      <ParagraphPlaceholder
        widthList={[90, 40]}
        rows={2}
        lineSpacing={8}
        itemHeight={14}
      />
    </FlexColumn>
  )
}

function defaultRenderStatus() {
  return (
    <React.Fragment>
      <StyledValue width={100} height={18} />
      <StyledValue width={80} height={18} />
    </React.Fragment>
  )
}

function defaultRenderActionButtons() {
  return (
    <React.Fragment>
      <StyledActionButton width={200} height={44} />
      <StyledActionButton width={200} height={44} />
      <StyledActionButton width={200} height={44} />
    </React.Fragment>
  )
}
function defaultRenderBox(props: ProductItemProps, state: CommonState) {
  const {
    item,
    renderProductDetails,
    renderShippingAddress,
    renderShippingMethod,
    renderStatus,
    renderActionButtons,
    ...remainingProps
  } = props
  return (
    <React.Fragment>
      <ItemContainer>
        <ProductItemWrapper>{renderProductDetails(item)}</ProductItemWrapper>
        <ShippingWrapper isVisible={state.isVisible}>
          <StatusWrapper>{renderStatus(item)}</StatusWrapper>
          {renderShippingAddress(item)}
          {renderShippingMethod(item)}
        </ShippingWrapper>
        {!state.isVisible && (
          <ActionButtonWrapper>
            {renderActionButtons({ item, ...remainingProps }, state)}
          </ActionButtonWrapper>
        )}
      </ItemContainer>
      {state.isVisible && (
        <CancellationReturnForm
          stateProps={state}
          cancelAndReturnConfig={item.cancelAndReturnConfig}
          item={item}
          {...remainingProps}
        />
      )}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ProductItemProps) {
  const { className, children } = props
  const view = (
    <OrderItemWrapper className={className}>{children}</OrderItemWrapper>
  )
  return view
}

export {
  defaultRenderActionButtons,
  defaultRenderShippingMethod,
  defaultRenderShippingAddress,
  defaultRenderStatus,
  defaultRenderProductDetails,
  defaultRenderBox,
  defaultRenderWrapper,
}