import classnames from 'classnames'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Confirm from './Confirm'
import context from './context'
import './index.less'

export interface Props {
  type: string
  classNames?: string
  isPad?: boolean
  visible: boolean
  hideOnClickWrapper: boolean
  onChange: Function
  cancelText: string
  confirmText: string
  content: string
  onConfirmClick: Function
  onCancelClick: Function
}

function getChild(type: string) {
  switch (type) {
    case 'confirm':
      return Confirm

    default:
      return <div />
  }
}

export interface State {
  show: boolean
}

let _instace = 0

class Dialog extends Component<Props, State> {
  public static defaultProps = {
    type: 'confirm',
    hideOnClickWrapper: true,
    onChange: () => {},
    onConfirmClick: () => {},
    onCancelClick: () => {},
    cancelText: '取消',
    confirmText: '确定',
    content: ''
  }
  private istance = _instace++
  private domNode: HTMLElement
  public constructor(props: Props) {
    super(props)
    this.state = { show: this.props.visible }

    const div = document.createElement('div')
    div.id = `ph-dialog-instance-${this.istance}`
    document.body.appendChild(div)
    this.domNode = div
  }
  public onWrapperClick = () => {
    if (this.props.hideOnClickWrapper) {
      this.setState({ show: false }, () => {
        this.props.onChange(this.state.show)
      })
      this.props.onCancelClick()
    }
  }

  public componentWillReceiveProps(nextProps: Props) {
    this.setState({
      show: nextProps.visible
    })
  }

  public render(): React.ReactPortal {
    const {
      isPad,
      type,
      cancelText,
      confirmText,
      onConfirmClick,
      onCancelClick,
      content,
      children
    } = this.props
    const { show } = this.state
    const { onWrapperClick } = this
    const Child = getChild(type) as React.ComponentClass<any>
    return ReactDOM.createPortal(
      <context.Provider
        value={{
          cancelText,
          confirmText,
          onConfirmClick,
          onCancelClick,
          content,
          children
        }}
      >
        <div
          className="ph-dialog-wrapper"
          style={{
            display: show ? 'flex' : 'none'
          }}
          onClick={onWrapperClick}
        >
          <div
            onClick={e => e.stopPropagation()}
            className={classnames('ph-dialog', {
              'ph-dialog-pad': isPad
            })}
          >
            <Child />
          </div>
        </div>
      </context.Provider>,
      this.domNode
    )
  }
}

export default Dialog