import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { toCommonState } from 'src/state/common'
import { SnackBarWrapper, Message } from './styled'
import { SnackBarProps, SnackBarState } from './typings'
import {
  defaultRenderMessage,
  defaultRenderActionButtons,
  defaultRenderWrap,
  renderChildren,
} from './renderProps'

@observer
class SnackBar extends React.Component<SnackBarProps, SnackBarState> {
  static defaultProps = {
    // render
    renderWrap: defaultRenderWrap,
    renderMessage: defaultRenderMessage,
    renderActionButtonGroup: defaultRenderActionButtons,
    // standar
    className: '',
    label: '',
    // passed to commonState only
    isVisible: true,
    // custom
    position: 'bottomleft',
  }

  observableState = toCommonState(this.props)

  render() {
    console.debug('[SnackBar] render')

    const {
      // may not be needed
      renderWrap,
      renderMessage,
      renderActionButtonGroup,
      ...remainingProps
    } = this.props

    const children =
      remainingProps.children === undefined
        ? renderChildren(this.props, this.observableState)
        : remainingProps.children

    const props = { ...remainingProps, children }
    return renderWrap(props, this.observableState)
  }
}

export { SnackBar }
export default SnackBar