import React from 'react'
import toClassName from 'classnames'
// @todo
import { MaterialIcon } from 'atoms/MaterialIcon'
import { Title, TitleSpan } from './styled'
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)
  }

  /**
   * change to only renderProp
   */
  get defaultIcon() {
    const { isActive, isPlusMinus } = this.props
    if (isPlusMinus === true) {
      return <MaterialIcon type={isActive ? 'minus' : 'plus'} />
    } else {
      return <MaterialIcon type={isActive ? 'up' : 'down'} />
    }
  }

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

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

  render() {
    const { isDisabled, isActive, shouldShowArrowIcon } = 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}
        data-qa={this.props['data-qa']}
      >
        <TitleSpan>
          <Title key="title">{title}</Title>
          {defaultIcon}
        </TitleSpan>
      </AccordionHeader>
    )
  }
}

export { AccordionTitle }
export default AccordionTitle