import React from 'react'
import { CommonState } from '@skava/ui/dist/state'
import { SquarePlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { HeaderProps } from './typings'
import {
  ButtonPlaceholder,
  StatusPlaceholder,
  Heading,
  Title,
  LeftSection,
  StyledWrapper,
} from './styled'

function defaultRenderButton(props: HeaderProps, state?: CommonState) {
  return <ButtonPlaceholder />
}

function defaultRenderContent(props: HeaderProps) {
  return <StatusPlaceholder rows={2} widthList={[100, 40]} />
}

function defaultRenderHeader(props: HeaderProps) {
  return (
    <React.Fragment>
      <SquarePlaceholder width={24} height={24} />
      <Heading />
    </React.Fragment>
  )
}

function defaultRenderBox(props: HeaderProps, state?: CommonState) {
  const {
    hasContent,
    renderHeader,
    renderContent,
    renderButton,
    ...remainingProps
  } = props
  return (
    <React.Fragment>
      <LeftSection>
        <Title>{renderHeader(remainingProps)}</Title>
      </LeftSection>
      {renderButton(remainingProps, state)}
      {hasContent === true && renderContent(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: HeaderProps) {
  const { className, children, dataQa, hasContent, noWrap } = props
  const passThroughProps = Object.freeze({
    className,
    hasContent,
    'data-qa': dataQa,
  })
  const Wrapper = noWrap ? React.Fragment : StyledWrapper
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderButton,
  defaultRenderContent,
  defaultRenderHeader,
  defaultRenderBox,
  defaultRenderWrapper,
}