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 InputBox from './InputBox';
import PopOverContainer from './PopOverContainer';
import { isMobile } from '../utils/helper';
import {
  SchemaNode,
} from '../types';
import { Button } from 'antd';
import { isEqual } from 'lodash';

export interface TransferDropDownProps extends TransferProps {
  // 新的属性？
  multiple?: boolean;
  borderMode?: 'full' | 'half' | 'none';
  useMobileUI?: boolean;
  popOverContainer?: any;
  // Jay 多选时，超过多少个折叠
  showCount?: number;
  labelTpl?: string;
  render?: (region: string, node: SchemaNode, props?: any) => JSX.Element;
  loading?: boolean;
  label?: string | false;
  domicile?: any
}

export class TransferDropDown extends Transfer<TransferDropDownProps> {
  render() {
    const {
      classnames: cx,
      value,
      translate: __,
      disabled,
      clearable,
      className,
      onSearch,
      multiple,
      borderMode,
      useMobileUI,
      popOverContainer,
      placeholder,
      showCount,
      labelTpl,
      domicile,
      label,
      render,
      onChange
    } = this.props;
    const { inputValue, searchResult } = this.state;
    const mobileUI = useMobileUI && isMobile();
    return (
      <PopOverContainer
        useMobileUI={useMobileUI}
        popOverContainer={popOverContainer}
        popOverClassName={cx('TransferDropDown-popover')}
        onActonClick={onChange}
        multiple={multiple}
        clearSearchValue={() => this.setState({ inputValue: '', searchResult: null })}
        popOverRender={({ onClose }) => (
          <div
            className={cx('TransferDropDown-content', {
              'is-mobile': mobileUI,
              'is-borderTop': (this.props.selectMode !== 'list' && !onSearch)
            })}
          >
            {onSearch ? (
              <div className={cx('Transfer-search')}>
                <InputBox
                  value={inputValue}
                  onChange={this.handleSearch}
                  placeholder={__('Transfer.searchKeyword')}
                  clearable={false}
                  onKeyDown={this.handleSearchKeyDown}
                >
                  {searchResult !== null ? (
                    <a onClick={this.handleSeachCancel} className={cx('Transfer-SeachCancel')}>
                      <Icon icon="close" className="icon" />
                    </a>
                  ) : (
                    <Icon icon="search" className="icon" />
                  )}
                </InputBox>
              </div>
            ) : null}
            {searchResult !== null
              ? this.renderSearchResult({
                ...this.props,
                value,
                onChange: multiple
                  ? onChange
                  : (value: any) => {
                    onClose();
                    onChange?.(value);
                  },
                multiple
              })
              : this.renderOptions({
                ...this.props,
                value,
                onChange: multiple
                  ? onChange
                  : (value: any) => {
                    onClose();
                    isEqual(this.props.value[0], value) ?
                      onChange?.([]) : onChange?.(value);
                  },
                multiple
              })}
          </div>
        )}
        popOverHeat={<div className={cx('TransferDropDown-header')} >{label ?? domicile?.label ?? ""}</div>}
        popOverfooter={(onClose) =>
          <div className={cx('TransferDropDown-footer')} style={{ borderTop: '0.0625rem solid var(--ListMenu-divider-color)', padding: '8px 12px', textAlign: 'right' }}>
            <Button className={cx(`PopUp-confirm`)} size="small" onClick={onClose} type="primary" style={{ borderRadius: '4px' }}>
              {__('confirm')}
            </Button>
          </div>}
      >
        {({ onClick, isOpened, ref }) => (
          <ResultBox
            className={cx(
              'TransferDropDown',
              className,
              isOpened ? 'is-active' : ''
            )}
            borderMode={borderMode}
            allowInput={false}
            result={multiple ? value : value?.[0] ? value?.[0] : null}
            onResultChange={onChange}
            onResultClick={disabled ? null : onClick}
            placeholder={placeholder || __('Select.placeholder')} // Jay
            disabled={disabled}
            clearable={clearable}
            ref={ref}
            useMobileUI={useMobileUI}
            labelTpl={labelTpl}
            showCount={showCount}
            render={render}
          >
            {!mobileUI ? (
              <span className={cx('TransferDropDown-icon')}>
                <Icon icon="caret" className="icon" />
              </span>
            ) : (
              <></>
            )}
          </ResultBox>
        )
        }
      </PopOverContainer>
    );
  }
}

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