import React from 'react'
import toClassName from 'classnames'
// @todo
import ArrowIcon from 'icons/ArrowIcon'
import PlusMinusIcon from 'icons/ArrowIcon'
import { Title, ArrowWrap } from './_elements'
import { AccordionTitleProps } from './typings'
import { AccordionHeader } from './AccordionHeader'

function toTitle(props: AccordionTitleProps) {
  const title = props.children || props.text || props.title
  const activeText = props.activeText || title
  return props.isActive === true ? activeText : title
}

// renderText
// renderIcon
class AccordionTitle extends React.PureComponent<AccordionTitleProps> {
  static defaultProps = {
    title: '',
    isActive: false,
    isDisabled: false,
    defaultIcon: '',
    qa: '',
    // onToggle: Function,
  }
  get title() {
    return toTitle(this.props)
  }

  get defaultIcon() {
    const { isActive, isPlusMinus } = this.props

    if (isPlusMinus === true) {
      return <PlusMinusIcon type={isActive ? 'minus' : 'plus'} />
    }
    return (
      <ArrowWrap key="arrow">
        <ArrowIcon up={isActive} down={!isActive} fat />
      </ArrowWrap>
    )
  }

  handleClick = event => {
    const { isDisabled, onToggle } = this.props

    if (isDisabled === true) {
      console.info('[Accordion] item disabled!')
    } else {
      onToggle(event)
    }
  }

  render() {
    const { isDisabled, isActive, shouldShowArrowIcon, qa } = this.props
    const title = this.title

    // @todo - into styled
    const className = toClassName({
      title: true,
      down: isActive,
      disable: isDisabled,
    })
    const defaultIcon = shouldShowArrowIcon === true ? this.defaultIcon : ''

    return (
      <AccordionHeader
        key="accordion-header"
        onClick={this.handleClick}
        className={className}
        aria-expanded={!isActive}
        qa={qa}
      >
        <Title key="title">{title}</Title>
        {defaultIcon}
      </AccordionHeader>
    )
  }
}

export { AccordionTitle }
export default AccordionTitle