import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { omit } from 'uxui-modules/utils/omit'
import AnimateHeight from 'react-animate-height'
import { AnimatedCardProps, AnimatedCardState } from './typings'
import { StyledExpandableCard } from './styled'
import {
  defaultRenderToggleButton,
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
} from './renderProps'

/**
 * !!! @mohan
 * @todo split to another file
 * @todo typings
 */
@observer
class ObservableAnimatedExpandableCard extends React.Component<AnimatedCardProps, AnimatedCardState> {
  render() {
    const {
      renderHeaderView,
      renderFooterView,
      renderExpandableView,
      state,

      ...remainingProps
    } = this.props

    console.debug('renderAnimateHeight view')
    const animatingHeight = state.isExpanded ? 'auto' : 0

    return (
      <React.Fragment key="animated">
        {renderHeaderView(remainingProps, state)}
        <AnimateHeight duration={500} height={animatingHeight}>
          {renderExpandableView(remainingProps, state)}
        </AnimateHeight>
        {renderFooterView(remainingProps, state)}
      </React.Fragment>
    )
  }
}
/**
 * predefined function with height animation
 * @note not observable as a renderProp
 */
function renderView(props: AnimatedCardProps, state: AnimatedCardState) {
  return <ObservableAnimatedExpandableCard {...props} state={state} />
}

const KNOWN_PROPS = ['renderDefaultView', 'renderExpandedView']
Object.freeze(KNOWN_PROPS)

class AnimatedExpandableCard extends React.Component<AnimatedCardProps, AnimatedCardState> {
  static defaultProps = {
    className: '',
    renderToggleButton: defaultRenderToggleButton,
    renderHeaderView: defaultRenderHeaderView,
    renderExpandableView: defaultRenderExpandableView,
    renderFooterView: defaultRenderFooterView,
  }

  render() {
    const remainingProps = omit(this.props, KNOWN_PROPS)

    return (
      <StyledExpandableCard
        renderHeaderView={defaultRenderHeaderView}
        renderDefaultView={renderView}
        renderExpandedView={renderView}
        {...remainingProps}
      />
    )
  }
}

export { AnimatedExpandableCard }
export default AnimatedExpandableCard