import React from 'react'
import { observe } from 'xmobx/mobx'
import { observer } from 'xmobx/mobx-react'
import Button from 'atoms/Button'
import { CardProps } from './typings'
import {
  renderWrap as defaultRenderWrap,
  renderToggleButton as defaultRenderToggleButton,
  renderDefaultView as defaultRenderDefaultView,
  renderExpandedView as defaultRenderExpandedView,
} from './renderProps'
import { ExpandableState } from './State'

// only instantiate if needed
function initExpandableCardState() {
  console.debug('[ExpandableCard] creating default state')
  return new ExpandableState()
}

function toExpandableState(props: CardProps) {
  if (props.state !== undefined) {
    console.debug('[ExpandableCard] passed in state via props')
    console.dir(props)
    return props.state
  } else {
    return initExpandableCardState()
  }
}

@observer
class ExpandableCard extends React.Component<CardProps, ExpandableState> {
  static defaultProps = {
    renderWrap: defaultRenderWrap,
    renderToggleButton: defaultRenderToggleButton,
    renderDefaultView: defaultRenderDefaultView,
    renderExpandedView: defaultRenderExpandedView,
  }
  observableState: ExpandableState = toExpandableState(this.props)

  render() {
    // @todo - the content of this is actually the content of this render
    const {
      state = this.observableState,
      //
      renderWrap,
      renderToggleButton,
      renderExpandedView,
      renderDefaultView,
      //
      ...remainingProps
    } = this.props

    console.debug('[ExpandableCard] render')

    // @todo maybe this is passing too much props
    const toggleButton = renderToggleButton(remainingProps, this.observableState)
    const currentView = this.observableState.isExpanded
      ? renderExpandedView(remainingProps, this.observableState)
      : renderDefaultView(remainingProps, this.observableState)

    const children = (
      <React.Fragment>
        {toggleButton}
        {currentView}
      </React.Fragment>
    )
    return renderWrap({ ...remainingProps, children }, this.observableState)
  }
}

export { ExpandableCard }
export default ExpandableCard