import React from 'react'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { ProductList } from './ProductList'
import { ItemProps, ItemStateProps } from './typings'
import {
  ActionBarWrapper,
  HeaderWrapper,
  StyledButtonWrapper,
  StyledTextPlaceholder,
  StyledSquarePlaceholder,
  StyledRectanglePlaceholder,
  StyledNamePlaceHolder,
  StyledButtonPlaceHolder,
} from './styled'

function defaultRenderActionBar(props: ItemProps, state: ItemStateProps) {
  return (
    <React.Fragment>
      <StyledNamePlaceHolder width={200} height={20} />
      <StyledButtonWrapper>
        <StyledSquarePlaceholder width={20} height={20} />
        <StyledSquarePlaceholder width={20} height={20} />
        <StyledTextPlaceholder height={16} />
        <StyledRectanglePlaceholder width={36} height={18} />
      </StyledButtonWrapper>
    </React.Fragment>
  )
}

function defaultRenderButton(props: ItemProps, state: ItemStateProps) {
  return (
    <StyledButtonPlaceHolder
      width={150}
      height={25}
      onClick={state.handleToggle}
    />
  )
}

function defaultRenderRemoveConfirmation(
  props: ItemProps,
  state: ItemStateProps
) {
  return <Empty />
}

function defaultRenderHeaderView(props: ItemProps, state: ItemStateProps) {
  const {
    renderActionBar,
    renderButton,
    renderRemoveConfirmation,
    ...remainingProps
  } = props
  const { isConfirming, isExpanded } = state
  return (
    <HeaderWrapper isConfirming={isConfirming} isExpanded={isExpanded}>
      <ActionBarWrapper isConfirming={isConfirming}>
        {renderActionBar(remainingProps, state)}
      </ActionBarWrapper>
      {renderButton(remainingProps, state)}
      {isConfirming === true && renderRemoveConfirmation(remainingProps, state)}
    </HeaderWrapper>
  )
}

function defaultRenderExpandableView(props: ItemProps, state: ItemStateProps) {
  return <ProductList {...props} />
}

function defaultRenderFooterView() {
  return <Empty />
}

export {
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
  defaultRenderButton,
  defaultRenderActionBar,
  defaultRenderRemoveConfirmation,
}