// modules
import React from 'react'
import { isBoolean, isFunction, EMPTY_OBJ } from 'exotic'
// reusable
import AnimateHeight from 'react-animate-height'
import { CommonState } from 'src/state/typings'
import { observer, makeCommonState } from 'src/state'
// local
import AccordionTitle from './AccordionTitle'
import AccordionBlockWrap from './AccordionWrap'
import {
  AccordionBlockProps as Props,
  AccordionBlockState as State,
} from './typings'

function toAttributes(
  props: Props,
  state: State,
  instance: AccordionBlock = EMPTY_OBJ
) {
  // @see ./README
  const isVisible =
    isBoolean(props.isVisible) === true ? props.isVisible : state.isVisible

  const onToggle = instance.handleToggle

  return { ...props, isVisible, onToggle }
}

function toWrapperProps(props: Props, state: State, instance: AccordionBlock) {
  const { isVisible } = toAttributes(props, state)
  const {
    className,
    isDisabled,
    id,
    qa,
  } = props
  const wrapAttributes = {
    id,
    className,
    isVisible,
    isActive: isVisible,
    isDisabled,
    qa,
  }
  return wrapAttributes
}

function toTitleProps(props: Props, state: State, instance: AccordionBlock) {
  const { isVisible } = toAttributes(props, state)
  const { isDisabled, isPlusMinus, title, shouldShowArrowIcon, qa } = props
  const activeText = props.activeTitle || title
  const onToggle = instance.handleToggle

  return {
    title,
    activeText,
    onToggle,
    isPlusMinus,
    isDisabled,
    shouldShowArrowIcon,
    isActive: isVisible,
    'data-qa': qa,
  }
}

@observer
class AccordionBlock extends React.Component<Props, CommonState> {
  // unused if we pass in props isVisible
  state = makeCommonState(this.props)
  static defaultProps = {
    title: '',
    defaultView: '',
    shouldShowArrowIcon: true,
    id: undefined,
  }
  // componentDidMount
  componentWillMount() {
    const { isVisible, isDefaultVisible } = this.props
    if (isDefaultVisible === true || isVisible === true) {
      this.state.show()
    }
  }
  // @type {React.EventHandler}
  handleToggle = (event: React.MouseEvent) => {
    // if they pass in a handler
    if (isFunction(this.props.onToggle)) {
      this.props.onToggle(event)
    } else {
      // we call the default handler
      this.state.handleToggleVisibility()
    }
  }
  render() {
    const wrapAttributes = toWrapperProps(this.props, this.state, this)
    const passThrough = toTitleProps(this.props, this.state, this)
    const { isVisible } = wrapAttributes
    const { children } = this.props

    return (
      <AccordionBlockWrap {...wrapAttributes}>
        <AccordionTitle {...passThrough} key="accordion-title-component" />
        <AnimateHeight
          key="accordion-collapse"
          duration={500}
          height={isVisible === false ? 0 : 'auto'}
        >
          {children}
        </AnimateHeight>
      </AccordionBlockWrap>
    )
  }
}

export { AccordionBlock }
export default AccordionBlock