//Aug input-table批量修改
import React from 'react';
import { RendererProps } from '../../factory';
import { Action } from '../../types';
import Overlay from '../../components/Overlay';
import { findDOMNode } from 'react-dom';
import PopOver from '../../components/PopOver';

export interface HeadCellBatchEditProps extends RendererProps {
  name: string | undefined;
  batchEdit: boolean | BatchEditConfig;
  onBatchEdit: (values: object) => void;
}

export interface BatchEditConfig {
  type?: string;
  name?: string;
  label?: string;
  body?: any;
  focusable?: boolean;
  [propName: string]: any;
}

export class HeadCellBatchEditDropdown extends React.Component<
  HeadCellBatchEditProps,
  any
> {
  state = {
    isOpened: false
  };

  formItems: Array<string> = [];
  constructor(props: HeadCellBatchEditProps) {
    super(props);

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleAction = this.handleAction.bind(this);
  }

  buildSchema() {
    const { batchEdit, name, label, translate: __ } = this.props;

    let schema;

    if (batchEdit === true) {
      schema = {
        type: 'form',
        title: '',
        autoFocus: true,
        body: [
          {
            type: 'input-text',
            name,
            placeholder: label,
            label: false
          }
        ]
      };
    } else if (batchEdit) {
      schema = {
        title: '',
        type: 'form',
        autoFocus: true,
        mode: 'normal',
        body: [
          {
            type: batchEdit.type || 'input-text',
            name: batchEdit.name || name,
            ...batchEdit,
            mode: undefined
          }
        ]
      };
    }

    if (schema) {
      schema = {
        ...schema,
        wrapWithPanel: true,
        actions: [
          {
            type: 'button',
            label: __('cancel'),
            actionType: 'cancel'
          },

          {
            label: __('confirm'),
            type: 'submit',
            primary: true
          }
        ]
      };
    }

    return schema || 'error';
  }

  handleClickOutside() {
    this.close();
  }

  open() {
    this.setState({
      isOpened: true
    });
  }

  close() {
    this.setState({
      isOpened: false
    });
  }

  handleAction(e: any, action: Action, ctx: object) {

    if (action.actionType === 'cancel' || action.actionType === 'close') {
      this.close();
      return;
    }

  }

  handleSubmit(values: any) {
    const { onBatchEdit } = this.props;

    this.close();

    onBatchEdit(values);
  }

  render() {
    const {
      render,
      popOverContainer,
      classPrefix: ns,
      classnames: cx,
      canAccessSuperData
    } = this.props;

    return (
      <span
        className={cx(`${ns}TableCell-batchEditBtn`)}
      >
        <span onClick={this.open} style={{ marginLeft: 5, fontSize: 13, color: '#3ea8ff', cursor: 'pointer' }}>
          批量
        </span>
        {this.state.isOpened ? (
          <Overlay
            container={() => findDOMNode(this)}
            placement="left-bottom-left-top right-bottom-right-top"
            target={() => findDOMNode(this)!.parentNode}
            show
          >
            <PopOver
              classPrefix={ns}
              onHide={this.close}
              className={cx(
                `${ns}TableCell-batchEidtPopOver`,
              )}
              overlay
            >
              {render('inline-form', this.buildSchema(), {
                value: undefined,
                wrapperComponent: 'div',
                className: cx('Form--batchEdit'),
                simpleMode: true,
                onChange: null,
                onAction: this.handleAction,
                onSubmit: this.handleSubmit,
                formLazyChange: false,
                canAccessSuperData
              })}
            </PopOver>
          </Overlay>
        ) : null}
      </span>
    );
  }
}