/*
 * @Author: zw1995
 * @Description:
 * @Date: 2023-07-28 16:08:38
 * @LastEditors: ttheitao
 * @LastEditTime: 2024-04-16 09:52:52
 */
import { DomBase } from "../../Base";
import { ISelectOptionProps, Option } from "./Option";
import { SelectDropdown } from "./SelectDropdown";
import { NaiveInput } from "../../NativeInput";
import { isDefine } from "../../../../Utils";

export interface ISelectProp {
  // 默认值
  value: Array<string | number> | string | number;
  // 选项
  options: Array<ISelectOptionProps>;
  // 多选
  multiple: boolean;
  // 禁用
  disabled: boolean;
  // 事件 - 选项改变时
  onChangeCallback: ((value: Array<string | number> | number | string) => void) | null;
  // 占位符
  placeholder: string,
}
export class Select extends DomBase {
  public input: NaiveInput;
  public value: Array<string | number>;
  public options: Array<ISelectOptionProps>;
  public allOptions: Array<Option>;
  public multiple: boolean;
  public disabled: boolean;
  public dropdown: SelectDropdown;
  public activeOptions: Array<Option>;
  public onChangeCallback: ((value: Array<string | number> | number | string) => void) | null;
  public searchKey: string;
  public isRestore: boolean;
  public placeholder: string;

  constructor(prop: Partial<ISelectProp>) {
    super();

    this.addClass('select').setStyle({
      position: 'relative',
      padding: '0 3px'
    });

    this.multiple = prop?.multiple ?? false;
    this.disabled = prop?.disabled ?? false;
    this.value = prop?.value && !Array.isArray(prop.value) ? [prop.value] : [];
    this.options = prop?.options ?? [];
    this.allOptions = [];
    this.activeOptions = [];
    this.onChangeCallback = prop?.onChangeCallback ?? null;
    this.searchKey = '';
    this.isRestore = false;
    this.placeholder = prop?.placeholder ?? '请选择';

    this.input = new NaiveInput('', this.placeholder);
    this.input.DOM.style.cursor = 'pointer';
    this.input.setColor("black")
    this.input.onClick((e: MouseEvent) => {
      e.preventDefault();
      if (this.dropdown.isShow()) {
        this.clearSearchKey();
        this.filterOptions();
        this.restoreLabel();
      }
      this.dropdown.toggle();
      // @mark selectDropdown中设置了 index = 1即可遮住其他
      // GraphViewer.zIndex = GraphViewer.zIndex + 1
      // this.dropdown.setStyle({
      //   zIndex: GraphViewer.zIndex + ''
      // })
    });
    this.input.DOM.addEventListener('input', () => {
      if (this.isRestore) return;
      this.searchKey = this.input.getValue() ?? '';
      this.filterOptions();
    });
    this.add(this.input);
    // const arr = this.getLabel() as Array<string | number>;
    // this.input.setValue(arr.join());

    // Dropdown
    this.dropdown = new SelectDropdown(`${this.input.DOM.clientHeight + 25}px`);
    // this.dropdown.hide();
    // this.options.forEach((item) => {
    //   const option = new Option(this, item);
    //   this.dropdown.add(option);
    //   if (this.hasValue(item.value)) {
    //     this.activeOptions.push(option);
    //     option.active();
    //   }
    // });
    this.add(this.dropdown);

    this.setValue(this.value);

    // Event
    // this.input.onClick((e: MouseEvent) => {
    //   e.stopPropagation();
    //   this.dropdown.toggle();
    // });

  }

  setValue(value: Array<string | number>): void {
    this.value = value;
    const arr = this.getLabel() as Array<string | number>;
    this.input.setValue(arr.join());
    // Dropdown
    this.dropdown.hide();
    // @mark 重建options的时候要先清空
    this.dropdown.clear();
    this.renderOptions(true);
    // onChange
    this.onChangeCallback && this.onChangeCallback(this.value);
  }
  /**
   * @description: 注册数据变化时的回调
   * @param {function} callback
   * @return {*}
   */
  public onChange(callback: (value: Array<string | number> | number | string) => void): this {
    this.onChangeCallback = callback;
    return this;
  }

  /**
   * @description: 新增一个选项
   * @param {ISelectOptionProps} props 选项
   * @return {this}
   */
  addOption(props: ISelectOptionProps): Option {
    const option = new Option(this, props);
    this.allOptions.push(option);
    this.dropdown.add(option);
    return option;
  }

  /**
   * @description: 选中
   * @param {Option} option 选项实例
   * @return {this}
   */
  checked(option: Option): void {
    if (this.multiple) {
      const index = this.activeOptions.indexOf(option);
      if (index > -1) {
        this.activeOptions[index].active(false);
        this.activeOptions.splice(index, 1);

        const valueIndex = this.value.indexOf(option.value);
        this.value.splice(valueIndex, 1);
      } else {
        this.activeOptions.push(option);
        option.active();
        this.value.push(option.value);
      }
    } else {
      if (this.activeOptions.length) {
        this.activeOptions[0].active(false);
      }
      this.activeOptions[0] = option;
      option.active();

      this.value[0] = option.value;
      this.dropdown.toggle();
    }

    this.restoreLabel();

    // onChange
    this.onChangeCallback && this.onChangeCallback(this.value);
  }

  /**
   * @description: 获取选中项的显示值
   * @param {string} value
   * @return {*}
   */
  getLabel(value?: string | number): string | Array<string | number> {
    if (value === undefined) {
      const arr: Array<string | number> = [];
      this.options.forEach((item) => {
        this.hasValue(item.value) && arr.push(item.label);
      });
      return arr;
    } else {
      let one = this.options.find((item) => item.value === value);
      return one?.label ?? '';
    }
  }

  /**
   * @description: 恢复label,一般在过滤之后调用
   * @return {*}
   */
  restoreLabel() {
    this.isRestore = true;
    const label = this.getLabel();
    this.input.setValue(Array.isArray(label) ? label.join() : label);
    this.isRestore = false;
  }

  /**
   * @description: 获取值
   * @return {*}
   */
  getValue(): Array<string | number> | string | number {
    return this.multiple ? this.value : this.value[0];
  }
  /**
   * @description: 判断某个值是否为已选中
   * @param {string} value
   * @return {*}
   */
  hasValue(value: string | number): boolean {
    return this.value.indexOf(value) > -1;
  }

  /**
   * @description: 清空搜索
   * @return {*}
   */
  clearSearchKey(): void {
    this.searchKey = '';
  }

  /**
   * @description: 渲染options
   * @param {*} active 是否重置活跃options
   * @return {*}
   */
  public renderOptions(active = false): void {
    this.dropdown.clear();

    if (active) {
      this.activeOptions = [];
    }

    this.options.forEach((item) => {
      if (!isDefine(this.searchKey) || item.label.indexOf(this.searchKey) > -1) {
        const option = this.addOption(item);
        if (this.hasValue(item.value)) {
          active && this.activeOptions.push(option);
          option.active();
        }
      }
    });
  }

  /**
   * @description: 过滤选项
   * @return {*}
   */
  public filterOptions(): void {
    this.allOptions.forEach(item => {
      if (!isDefine(this.searchKey) || item.label.indexOf(this.searchKey) > -1) {
        item.show();
      } else {
        item.hide();
      }
    });
  }
}