import React, { SyntheticEvent } from 'react'
import { isFunction, isObj } from 'exotic'
import {
  Wrapper,
  StatusWrapper,
  DetailsWrapper,
  StyledTextPlaceholder,
  StyledRectanglePlaceholder,
  StyledPrintIcon,
} from './styled'
import { OrderStatusProps } from './typings'

function defaultRenderOrderStatus() {
  return (
    <StatusWrapper>
      <StyledTextPlaceholder width={200} />
      <StyledTextPlaceholder width={350} />
      <StyledTextPlaceholder width={200} />
    </StatusWrapper>
  )
}

function defaultRenderOrderDetails(props: OrderStatusProps) {
  const { state } = props
  const handleClick = isObj(state) === true ? state.handleToggle : false
  return <StyledRectanglePlaceholder height={24} onClick={handleClick} />
}

function defaultRenderPrintIcon() {
  return <StyledTextPlaceholder width={24} height={24} />
}

function defaultRenderBox(props: OrderStatusProps) {
  const {
    renderOrderStatus,
    renderOrderDetails,
    renderPrintIcon,
    onPrintButtonClick,
    ...remainingProps
  } = props

  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
    if (isFunction(onPrintButtonClick)) {
      onPrintButtonClick(event)
    }
  }
  return (
    <React.Fragment>
      {renderOrderStatus(remainingProps)}
      <DetailsWrapper>
        <StyledPrintIcon onClick={handleClick}>
          {renderPrintIcon(remainingProps)}
        </StyledPrintIcon>
        {renderOrderDetails(remainingProps)}
      </DetailsWrapper>
    </React.Fragment>
  )
}

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

export {
  defaultRenderOrderStatus,
  defaultRenderOrderDetails,
  defaultRenderPrintIcon,
  defaultRenderBox,
  defaultRenderWrapper,
}