import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { NO_OP, isSafe, isFunction } from 'exotic'
import { toCommonState, CommonState } from 'src/state'
import { HeaderProps } from './typings'
import { HeaderPlaceholder } from './styled'
import {
  defaultRenderButtonGroup,
  defaultRenderButton,
  defaultRenderHeader,
  defaultRenderContent,
} from './renderProps'

@observer
class Header extends React.Component<HeaderProps, CommonState> {
  static defaultProps = {
    // renderProps
    renderButtonGroup: defaultRenderButtonGroup,
    renderContent: defaultRenderContent,
    renderHeader: defaultRenderHeader,
    // handler
    onCreateListSubmit: NO_OP,
  }

  observableState = toCommonState(this.props)

  handleClick = args => {
    const { onCreateListSubmit, isSignedUser } = this.props
    const { handleToggleVisibility } = this.observableState
    handleToggleVisibility()
    if (isFunction(onCreateListSubmit)) {
      onCreateListSubmit(args)
    }
  }

  render() {
    return (
      <HeaderPlaceholder
        renderButton={defaultRenderButton}
        handleClick={this.handleClick}
        hasContent={isSafe(this.props.statusContent)}
        state={this.observableState}
        shouldWrap={this.observableState.isVisible}
        {...this.props}
      />
    )
  }
}

export { Header }