import React, { Component } from 'react';
import Search from '@beisen-phoenix/search';
import PlaceHolder from './Placeholder';
import DdItem from './DdItem';
import ToolTip from '@beisen-phoenix/tooltip';
import './style/DlList.scss';
import utils from '@beisen-phoenix/common-utils';
const classes = utils.BEMClass('groupSingleSelect');

export interface GroupSingleSelectProps {
  size?: 'small' | 'large' | 'auto'
  font?: 'small' | 'large'
  isSearch?: Boolean
  loading?: Boolean
  value?: string
  hasShadow?: Boolean
  options?: OptionsType[]
  searchWord?: string
  onChange?: Function
  userDefinedComponent?: React.ReactNode
  translation?: any;
  validateSearch?: (val:string) => {value:string,info:string,clearTipAfter?:number}
  extraCls?: string,
  isShowTitle?:boolean,
  caseSensitive?: boolean
  autoFocus?: boolean
}
export interface OptionsType {
  label?: string,
  value?: string,
  disabled?: Boolean
  children?: OptionsType[]
}

interface GroupSingleSelectState {
  searchValue?: string
  searchTip?: string
  options?: OptionsType[]
  autoFocus?: boolean
}

export default class extends Component<GroupSingleSelectProps, GroupSingleSelectState> {
  private ContainerWrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
  private DlWrapperRef: React.RefObject<HTMLDListElement> = React.createRef();
  private dtWrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
  private contentWrapper: React.RefObject<HTMLDivElement> = React.createRef();
  private contentHeight: number = 0;
  static defaultProps = {
    font: 'small',
    size: 'auto',
    hasShadow: false,
    translation: {noData: '这里什么都没有...'}
  }
  constructor(props: GroupSingleSelectProps) {
    super(props);
    console.warn('@beisen-phoenix/group-single-select即将废弃，我们将不再新增特性。如需使用新特性请替换为@beisen-phoenix/select-list组件 ');
    this.state={
      searchValue: '',
      searchTip: '',
      options: props.options || [],
      autoFocus: false
    }
  }

  componentDidMount() {
    if (this.contentWrapper && this.contentWrapper.current) {
      this.contentHeight = this.contentWrapper.current.clientHeight;
    }
    if (this.props.isSearch && this.props.autoFocus) {
      this.setState({
        autoFocus: true
      });
    }
  }
  //筛选数据
  getSelectData = () => {
    const { options = [], searchWord = '' } = this.props;
    const { searchValue } = this.state;
    //筛选option
    const inputValue = (searchValue || searchWord) && (searchValue || searchWord).trim();
    if (inputValue) {
      let arr: any[] = [], childArr :any[] =[];
      for(let i=0, len=options.length; i<len; i++) {
        if (options[i].children) {
          for (let j = 0;j < options[i].children!.length;j++) {
            let item = options[i].children![j];
            if (item && item.label && item.label.includes(inputValue)) {
              childArr.push(item);
            }
          }
        }
        if (childArr.length) {
          if (options[i].label) {
            arr.push({
              label: options[i].label,
              children: childArr
            });
          } else {
            arr.push({
              children: childArr
            })
          }
          childArr=[];
        }
      }
      return arr;
    }
    return options;
  }
  getAllOptionsNum = () => {
    const { options = [] } = this.props;
    let count = 0;
    for(let i=0; i<options.length;i++) {
      if ('label' in options[i]) {
        count++;
      } 
      count = count + (options[i] && options[i].children ?  options[i].children!.length : 0);
    }
    return count;
  }

  //遍历数据
  renderContent = () => {
    const { options, font = 'small', value, loading, searchWord = '', isSearch, isShowTitle = true } = this.props;
    const { searchValue } = this.state;
    const inputValue = (searchValue || searchWord) && (searchValue || searchWord).trim();

    //筛选option
    let filterItems = this.getSelectData();

    if (loading) {
      return <PlaceHolder loading={loading} />;
    }
    if (Array.isArray(filterItems) && filterItems.length) {
      let newArrGroup: JSX.Element[] = [];
      let newArrNoGroup: JSX.Element[] = [];
      filterItems.forEach((item, index) => {
        const dt = item.label ? <dt className={classes({element: 'dtWrapper',modifiers: {fontLarge: font === 'large'}})} key={item.label} ref={this.dtWrapperRef}>
          <ToolTip title={item.label} showOverflowTooltip={true}><div className={classes({element: 'dtText'})} dangerouslySetInnerHTML={{__html:(item.label || '')}}></div></ToolTip>
        </dt> : null;
        let ddArr: JSX.Element[] = [];
        if (item.children && item.children.length) {
          item.children.forEach((child: {label: string, value: string}) => {
            let active = !!value && child.value === value;
            ddArr.push(<DdItem key={child.label} font={font} searchValue={inputValue} groupSelectSign={item.label ? true : false} active={active} item={child} onClick={this.onClick} />);
          })
        }
        if (isShowTitle || ddArr.length) {
          if (item.label) {
            newArrGroup.push(<div className={classes({element: 'group'})} key={index}>{dt}{ddArr}</div>);
          } else {
            newArrNoGroup.push(<div key={index}>{dt}{ddArr}</div>);
          }
        }
      })
      let newArr = newArrNoGroup.concat(newArrGroup)
      return <div className={classes({element: 'dListWrapper'})}><dl className={classes({element: 'dlWrapper',modifiers: {fontLarge: font === 'large'}})} ref={this.DlWrapperRef}>{newArr}</dl></div>;
    }
    return <PlaceHolder translation={this.props.translation} />;
  }

  onClick = (option:{label: string, value: string}) => {
    this.props.onChange && this.props.onChange(option);
  }

  onSearchChange = (val: any) => {
    let tmpString = String(val);
    let finalString:string = tmpString;
    let tipInfo:string = '';
    if(this.props.validateSearch) {
      const res = this.props.validateSearch(tmpString);
      if(res) {
        tipInfo = res.info;
        finalString = res.value;
        if(res.clearTipAfter) setTimeout(() => {this.setState({searchTip: ''})},res.clearTipAfter);
      } else {
        tipInfo = ''
        finalString = tmpString;
      }
    }
    this.setState({
      searchValue: finalString || tmpString,
      searchTip: tipInfo || ''
    });
  };

  getSearchInput = () => {
    const { isSearch } = this.props;
    const { searchValue } = this.state;
    if ('isSearch' in this.props) { //设置了是都显示搜索框的字段
      if (isSearch) {
        return <div className={classes({element: 'searchWrapper'})}><Search autoFocus={this.state.autoFocus} value={searchValue} onChange={this.onSearchChange} extend={this.state.searchTip} /></div>
      } 
      return null;
    } else { //没有设置搜索字段
      //如果超过10条出现搜索框
      let count = this.getAllOptionsNum();
      if (count > 10) {
        return <div className={classes({element: 'searchWrapper'})}><Search autoFocus={this.state.autoFocus} value={searchValue} onChange={this.onSearchChange} extend={this.state.searchTip} /></div>
      }
      //如果不超过10条则不出现搜索框
      return null;
    }
  }

  isEmpty() {
    if(this.props.loading) return false;
    const filterItems = this.getSelectData();
    return !(Array.isArray(filterItems) && filterItems.length);
  }

  render() {
    const { size='auto', font='small', hasShadow=false, userDefinedComponent, extraCls,loading, isSearch } = this.props;
    let searchInput = this.getSearchInput();
    const wrapperCls = classes({element: '',modifiers: {sizeSmall: size === 'small', sizeLarge: size === 'large',fontLarge: font === 'large', shadow: hasShadow,loading: loading,empty: this.isEmpty(), search: isSearch}, extra: extraCls});
    return (
      <div className={wrapperCls} ref={this.ContainerWrapperRef} >
        {searchInput}
        {userDefinedComponent ? userDefinedComponent : null}
        <div className={classes({ element: 'contentWraper' })} ref={this.contentWrapper} style={isSearch && this.contentHeight ? {height: this.contentHeight} : {}}>
        {
          this.renderContent()
        }
      </div>
      </div>

    )
  }

}