import React from 'react';
import { autobind, isMobile } from '../utils/helper';
import Overlay from './Overlay';
import PopOver from './PopOver';
import PopUp from './PopUp';
import { findDOMNode } from 'react-dom';

export interface PopOverContainerProps {
  children: (props: {
    onClick: (e?: React.MouseEvent) => void;
    isOpened: boolean;
    ref: any;
  }) => JSX.Element;
  popOverRender: (props: { onClose: () => void }) => JSX.Element;
  popOverContainer?: any;
  popOverClassName?: string;
  useMobileUI?: boolean;
  popOverHeat?: JSX.Element;
  popOverfooter?: (onClose: () => void) => JSX.Element;
  onActonClick?: (value: any[], optionModified?: boolean | undefined) => void;
  multiple?: boolean;
  //清除下拉框的查询条件
  clearSearchValue?: () => void;
}

export interface PopOverContainerState {
  isOpened: boolean;
}

export class PopOverContainer extends React.Component<
  PopOverContainerProps,
  PopOverContainerState
> {
  state: PopOverContainerState = {
    isOpened: false
  };

  target: any;

  @autobind
  targetRef(target: any) {
    this.target = target ? findDOMNode(target) : null;
  }

  @autobind
  handleClick() {
    this.setState({
      isOpened: true
    });
  }

  @autobind
  close() {
    const { clearSearchValue } = this.props;
    this.setState({
      isOpened: false
    }, () => {
      clearSearchValue?.()
    });
  }

  @autobind
  getTarget() {
    return this.target || (findDOMNode(this) as HTMLElement);
  }

  @autobind
  getParent() {
    return this.getTarget()?.parentElement;
  }

  render() {
    const {
      useMobileUI,
      children,
      popOverContainer,
      popOverClassName,
      popOverRender: dropdownRender,
      popOverHeat,
      popOverfooter,
      onActonClick,
      multiple
    } = this.props;
    const mobileUI = useMobileUI && isMobile();

    return (
      <>
        {children({
          isOpened: this.state.isOpened,
          onClick: this.handleClick,
          ref: this.targetRef
        })}
        {mobileUI ? (
          <PopUp
            isShow={this.state.isOpened}
            container={popOverContainer}
            className={popOverClassName}
            onHide={this.close}
            header={popOverHeat}
            footer={popOverfooter && popOverfooter(this.close)}
            onActonClick={onActonClick}
            multiple={multiple}
            showClose
          >
            {dropdownRender({ onClose: this.close })}
          </PopUp>
        ) : (
          <Overlay
            container={this.getTarget}
            target={this.getTarget}
            placement={'auto'}
            show={this.state.isOpened}
          >
            <PopOver
              overlay
              className={popOverClassName}
              style={{
                minWidth: this.target
                  ? Math.max(this.target.offsetWidth, 100)
                  : 'auto'
              }}
              onHide={this.close}
            >
              {dropdownRender({ onClose: this.close })}
              {multiple && popOverfooter?.(this.close)}
            </PopOver>
          </Overlay>
        )}
      </>
    );
  }
}

export default PopOverContainer;