import { localeable } from '../locale';
import { themeable } from '../theme';
import Transfer, { TransferProps } from './Transfer';
import { uncontrollable } from 'uncontrollable';
import React from 'react';
import ResultBox from './ResultBox';
import { Icon } from './icons';
import PickerContainer from './PickerContainer';
import { autobind, mapTree } from '../utils/helper';
import { RendererEnv } from '../env';
import Spinner from '../components/Spinner';
import { Modal } from 'antd';
import { handlelimitSize } from '../utils/utils';

export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
  // 新的属性？
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';

  /**
   * 边框模式，全边框，还是半边框，或者没边框。
   */
  borderMode?: 'full' | 'half' | 'none';
  env?: RendererEnv
  // Jay
  loading?: boolean;
  showCount?: number;

  /**
 * 最大选中个数
 */
  maxSelected?: number
  /**
   * 最小选中个数
   */
  minSelected?: number
}

export class TransferPicker extends React.Component<TransferPickerProps> {
  optionModified = false;
  @autobind
  handleConfirm(value: any) {
    this.props.onChange?.(value, this.optionModified);
    this.optionModified = false;
  }

  render() {
    const {
      classnames: cx,
      value,
      translate: __,
      disabled,
      className,
      onChange,
      size,
      env,
      borderMode,
      maxSelected,
      minSelected,
      ...rest
    } = this.props;
    return (
      <PickerContainer
        title={__('Select.placeholder')}
        env={env}
        bodyRender={({ onClose, value, onChange, setState, ...states }) => {
          return (
            <Transfer
              {...rest}
              {...states}
              value={value}
              onChange={(value: any, optionModified) => {
                if (optionModified) {
                  let options = mapTree(rest.options, item => {
                    return (
                      value.find((a: any) => a.value === item.value) || item
                    );
                  });
                  this.optionModified = true;
                  setState({ options, value });
                } else {
                  onChange(value);
                }
              }}
            />
          );
        }}
        maxSelected={maxSelected}
        minSelected={minSelected}
        value={value}
        onConfirm={this.handleConfirm}
        size={size}
      >
        {({ onClick, isOpened }) => (
          <ResultBox
            className={cx(
              'TransferPicker',
              className,
              isOpened ? 'is-active' : ''
            )}
            allowInput={false}
            result={value}
            onResultChange={onChange}
            onResultClick={onClick}
            placeholder={rest.placeholder || __('Select.placeholder')}
            disabled={disabled}
            borderMode={borderMode}
            // Jay
            showCount={this.props.showCount}
          >
            <span className={cx('TransferPicker-icon')}>
              {/* Jay */}
              {this.props.loading ? (
                <Spinner
                  show
                  icon="reload"
                  spinnerClassName={cx('Select-spinner')}
                  style={{ color: '#000' }}
                />
              ) : <Icon icon="pencil" className="icon" />}
            </span>
          </ResultBox>
        )}
      </PickerContainer>
    );
  }
}

export default themeable(
  localeable(
    uncontrollable(TransferPicker, {
      value: 'onChange'
    })
  )
);