import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe } from 'exotic'
import { toCommonState, CommonState } from '@skava/ui/dist/state'
import { HeaderProps } from './typings'
import {
  defaultRenderButton,
  defaultRenderContent,
  defaultRenderHeader,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

function getState(props: HeaderProps) {
  if (isSafe(props.state)) {
    return props.state
  } else {
    return toCommonState(props)
  }
}

@observer
class Header extends React.Component<HeaderProps, CommonState> {
  static defaultProps = {
    hasContent: false,
    // renderProps
    renderButton: defaultRenderButton,
    renderContent: defaultRenderContent,
    renderHeader: defaultRenderHeader,
    renderWrapper: defaultRenderWrapper,
  }

  observableState = getState(this.props)

  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const children = defaultRenderBox(remainingProps, this.observableState)
    const view = renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { Header }
export default Header