import React from 'react';
import { autobind } from '../utils/helper';
import Overlay from './Overlay';
import PopOver from './PopOver';
import { findDOMNode } from 'react-dom';
import Modal from './Modal';
import { Modal as Modals } from 'antd';
import { themeable, ThemeProps } from '../theme';
import { localeable, LocaleProps } from '../locale';
import Button from './Button';
import { RendererEnv } from '../env';
import { handlelimitSize } from '../utils/utils';

export interface PickerContainerProps extends ThemeProps, LocaleProps {
  title?: string;
  showTitle?: boolean;
  headerClassName?: string;
  children: (props: {
    onClick: (e: React.MouseEvent) => void;
    isOpened: boolean;
  }) => JSX.Element;
  bodyRender: (props: {
    onClose: () => void;
    value: any;
    onChange: (value: any) => void;
    setState: (state: any) => void;
    [propName: string]: any;
  }) => JSX.Element;
  value?: any;
  onConfirm?: (value?: any) => void;
  onCancel?: () => void;
  popOverContainer?: any;
  popOverClassName?: string;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
  env?: RendererEnv;
  /**
* 最大选中个数
*/
  maxSelected?: number
  /**
   * 最小选中个数
   */
  minSelected?: number
}

export interface PickerContainerState {
  isOpened: boolean;
  value?: any;
}

export class PickerContainer extends React.Component<
  PickerContainerProps,
  PickerContainerState
> {
  state: PickerContainerState = {
    isOpened: false,
    value: this.props.value
  };

  componentDidUpdate(prevProps: PickerContainerProps) {
    const props = this.props;

    if (props.value !== prevProps.value) {
      this.setState({
        value: props.value
      });
    }
  }

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

  @autobind
  close(e?: any, callback?: () => void) {
    this.setState(
      {
        isOpened: false
      },
      callback || (() => this.props.onCancel?.())
    );
  }

  @autobind
  handleChange(value: any) {
    this.setState({
      value
    });
  }

  @autobind
  confirm() {
    const { onConfirm, maxSelected, minSelected } = this.props;
    if (maxSelected !== undefined || minSelected !== undefined) {
      const dat = handlelimitSize(maxSelected, minSelected, this.state.value, this.showModal.bind(this))
      if (!dat)
        return
    }
    this.close(undefined, () => onConfirm?.(this.state.value));
  }
  showModal(val?: string) {
    const { env, translate: __ } = this.props;
    Modals.warning({
      title: '提示',
      content: val ?? '当前',
      getContainer: env?.getModalContainer,
      zIndex: 1020,
      okText: __('confirm')
    });
  }
  @autobind
  updateState(state: any = {}) {
    const { isOpened, ...rest } = state;
    this.setState({
      ...this.state,
      ...rest
    });
  }

  render() {
    const {
      children,
      bodyRender: popOverRender,
      title,
      showTitle,
      headerClassName,
      translate: __,
      size,
      env
    } = this.props;
    return (
      <>
        {children({
          isOpened: this.state.isOpened,
          onClick: this.handleClick
        })}

        <Modal
          size={size}
          closeOnEsc
          show={this.state.isOpened}
          onHide={this.close}
          container={env?.getModalContainer}
        >
          {showTitle !== false ? (
            <Modal.Header onClose={this.close} className={headerClassName}>
              {__(title || 'Select.placeholder')}
            </Modal.Header>
          ) : null}
          <Modal.Body>
            {popOverRender({
              ...(this.state as any),
              setState: this.updateState,
              onClose: this.close,
              onChange: this.handleChange
            })}
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>{__('cancel')}</Button>
            <Button onClick={this.confirm} level="primary">
              {__('confirm')}
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

export default themeable(localeable(PickerContainer));