import React from 'react'
import { TextPlaceholder, RectanglePlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { OrderStatusProps } from './typings'
import {
  OrderStatusWrapper,
  OrderStatusContainer,
  OrderDetailsPanel,
  OrderStatusButton,
  StatusText,
  Divider,
} from './styled'

/**
 * render order status details
 */
function defaultRenderOrderStatus(props: OrderStatusProps) {
  return (
    <React.Fragment>
      <StatusText>
        <TextPlaceholder width={200} height={20} />
      </StatusText>
      <Divider>
        <RectanglePlaceholder width={2} height={22} />
      </Divider>
      <StatusText>
        <TextPlaceholder width={200} height={20} />
      </StatusText>
      <Divider>
        <RectanglePlaceholder width={2} height={22} />
      </Divider>
      <StatusText>
        <TextPlaceholder width={200} height={20} />
      </StatusText>
    </React.Fragment>
  )
}

/**
 * render toggle button
 */
function defaultRenderActionButton(props: OrderStatusProps) {
  return <RectanglePlaceholder width={160} height={44} />
}

/**
 * local function
 */
function defaultRenderStatusSection(props: OrderStatusProps) {
  const { renderOrderStatus, renderActionButton, ...remainingProps } = props
  return (
    <OrderStatusContainer>
      <OrderDetailsPanel>{renderOrderStatus(remainingProps)}</OrderDetailsPanel>
      <OrderStatusButton>
        {renderActionButton(remainingProps)}
      </OrderStatusButton>
    </OrderStatusContainer>
  )
}

/**
 * rendering the wrapper
 */
function defaultRenderStatusWrapper(props: OrderStatusProps) {
  const { className, children } = props
  return (
    <OrderStatusWrapper className={className}>{children}</OrderStatusWrapper>
  )
}

export {
  defaultRenderOrderStatus,
  defaultRenderStatusSection,
  defaultRenderActionButton,
  defaultRenderStatusWrapper,
}