import React from 'react'
import { isFunction } from 'exotic'
import toClassName from 'classnames'
import { Empty } from 'atoms/Empty'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { AccordionHeader } from '../AccordionHeader'
import { TitleSpan, Title } from './styled'
import { toTitle } from './deps'
import { AccordionTitleProps } from './typings'

function defaultRenderTitle(props: AccordionTitleProps) {
  const title = toTitle(props)
  return <Title key="title">{title}</Title>
}

function defaultRenderIcon(props: AccordionTitleProps) {
  const { isActive, isPlusMinus } = props
  if (isPlusMinus === true) {
    return <MaterialIcon type={isActive ? 'minus' : 'plus'} />
  } else {
    return <MaterialIcon type={isActive ? 'up' : 'down'} />
  }
}
function defaultRenderBox(props: AccordionTitleProps) {
  const {
    shouldShowArrowIcon,
    renderTitle,
    renderIcon,
    ...remainingProps
  } = props
  const defaultIcon =
    shouldShowArrowIcon === true ? (
      isFunction(renderIcon) && renderIcon(remainingProps)
    ) : (
      <Empty />
    )
  return (
    <TitleSpan>
      {isFunction(renderTitle) && renderTitle(remainingProps)}
      {defaultIcon}
    </TitleSpan>
  )
}

function defaultRenderWrapper(props: AccordionTitleProps) {
  const { isDisabled, isActive, children, onClick } = props
  // @todo - into styled
  const className = toClassName({
    title: true,
    down: isActive,
    disable: isDisabled,
  })
  return (
    <AccordionHeader
      key="accordion-header"
      className={className}
      aria-expanded={!isActive}
      data-qa={props['data-qa']}
      onClick={onClick}
    >
      {children}
    </AccordionHeader>
  )
}

export {
  defaultRenderIcon,
  defaultRenderTitle,
  defaultRenderBox,
  defaultRenderWrapper,
}