import {
  OptionsControlProps,
  OptionsControl,
  FormOptionsControl
} from './Options';
import React from 'react';
import { Api } from '../../types';
import Spinner from '../../components/Spinner';
import { BaseTransferRenderer, TransferControlSchema } from './Transfer';
import TabsTransfer from '../../components/TabsTransfer';
import { SchemaApi, SchemaObject } from '../../Schema';
import TransferPicker from '../../components/TransferPicker';

/**
 * TransferPicker 穿梭器的弹框形态
 * 文档：https://baidu.gitee.io/amis/docs/components/form/transfer-picker
 */
export interface TransferPickerControlSchema
  extends Omit<TransferControlSchema, 'type'> {
  type: 'transfer-picker';
  /**
   * 边框模式，全边框，还是半边框，或者没边框。
   */
  borderMode?: 'full' | 'half' | 'none';

  /**
   * 弹窗大小
   */
  pickerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
  // Jay
  showCount?: number;
  /**
* 最大选中个数
*/
  maxSelected?: number
  /**
   * 最小选中个数
   */
  minSelected?: number
}

export interface TabsTransferProps
  extends OptionsControlProps,
  Omit<
  TransferPickerControlSchema,
  | 'type'
  | 'options'
  | 'inputClassName'
  | 'className'
  | 'descriptionClassName'
  > { }

@OptionsControl({
  type: 'transfer-picker'
})
export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferProps> {
  render() {
    const {
      className,
      classnames: cx,
      selectedOptions,
      sortable,
      loading,
      searchable,
      searchResultMode,
      showArrow,
      deferLoad,
      disabled,
      selectTitle,
      resultTitle,
      pickerSize,
      columns,
      leftMode,
      selectMode,
      borderMode,
      env,
      name,
      handleSaveData,
      maxSelected,
      minSelected
    } = this.props;

    // 目前 LeftOptions 没有接口可以动态加载
    // 为了方便可以快速实现动态化，让选项的第一个成员携带
    // LeftOptions 信息

    let { options, leftOptions, leftDefaultValue } = this.props;
    if (
      selectMode === 'associated' &&
      options &&
      options.length === 1 &&
      options[0].leftOptions &&
      Array.isArray(options[0].children)
    ) {
      leftOptions = options[0].leftOptions;
      leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
      options = options[0].children;
    }
    if (options.length && name?.includes('advancedFilter')) {
      const Name = name.split('.');
      handleSaveData && handleSaveData(name, options)
    }
    return (
      <div className={cx('TransferControl', className)}>
        <TransferPicker
          borderMode={borderMode}
          selectMode={selectMode}
          maxSelected={maxSelected}
          minSelected={minSelected}
          value={selectedOptions}
          env={env}
          disabled={disabled}
          options={options}
          onChange={this.handleChange}
          option2value={this.option2value}
          sortable={sortable}
          searchResultMode={searchResultMode}
          onSearch={searchable ? this.handleSearch : undefined}
          showArrow={showArrow}
          onDeferLoad={deferLoad}
          selectTitle={selectTitle}
          resultTitle={resultTitle}
          size={pickerSize}
          //这里直接取columns的话，在高级查询切换select的时候会变成原本crud的columns，暂不清楚原因，先这样处理一下
          columns={this.props.$schema.columns || columns}
          leftMode={leftMode}
          leftOptions={leftOptions}
          optionItemRender={this.optionItemRender}
          resultItemRender={this.resultItemRender}
          // Jay
          loading={loading}
          showCount={this.props.showCount}
          placeholder={this.props.placeholder}
        />

        {/* Jay */}
        {/* <Spinner overlay key="info" show={loading} /> */}
      </div>
    );
  }
}