import React from 'react';
import { WrapperBtnGroup } from './style';
import { classNames } from '../../utils/utils';
import { findDOMNode } from 'react-dom'
import {
  OptionsControl,
  OptionsControlProps,
  FormOptionsControl
} from '../../../Form/Options';

interface BtnSchema {
  label: string | number;
  value: string | number;
  current?: boolean;
  disabled?: boolean;
}

export interface LionBtnGroupSchema extends FormOptionsControl {
  /**
  * 按钮组类型
  */
  type: "lion-btn-group";
  /**
  * 按钮组
  */
  buttons: Array<BtnSchema>;
  /**
  * 按钮选中样式，暂未支持
  */
  btnActiveLevel: string;
  /**
  * 垂直展示，暂未支持
  */
  vertical?: boolean;
  /**
  * 水平展示，暂未支持
  */
  align?: boolean;
  /**
  * 是否为禁用状态，暂未支持
  */
  disabled?: boolean;
  /**
  * 刷新目标组件
  */
  reload?: string;

  _formName?: string;
}

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

export class LionBtnGroup extends React.PureComponent<LionBtnGroupProps, object>{
  static defaultProps = {
    name: 'LionBtnGroup',
    align: true,
    buttons: []
  }

  current: any;

  handleQuery = (value: any) => {
    const { name, _formName } = this.props;
    let _value = value ? value : '';
    let data = JSON.parse(JSON.stringify(this.props?.data));
    let prevPristine = data[_formName!];
    let newPristine = { [name?.split('.')[1]! || name!]: _value };
    let query: any = name?.split('.')?.length! > 1 ? { [_formName!]: { ...prevPristine, ...newPristine } } : { [name?.split('.')[1]! || name!]: _value };
    return { ...query, ...prevPristine }
  }

  handleChange = (e: any, value: any) => {
    e.stopPropagation()
    const { name, onAction, reload, _formName } = this.props;
    let _value = this.current ? value : '';
    let data = JSON.parse(JSON.stringify(this.props?.data));

    let prevPristine = data[_formName!];
    let newPristine = { [name?.split('.')[1]! || name!]: _value };
    let query: any = name?.split('.')?.length! > 1 ? { [_formName!]: { ...prevPristine, ...newPristine } } : { [name?.split('.')[1]! || name!]: _value };

    this.props?.onBulkChange && this.props?.onBulkChange(query);
    this.props?.onChange && this.props?.onChange(_value);

    onAction(e, {
      "type": "submit",
      [reload ? 'reload' : '']: reload
    }, { ...query, ...prevPristine }, false, this.context);
    return false;
  }

  handleActive = (e: any) => {

    let tag = false;

    const _thisDom: Element | null = findDOMNode(this) as Element | null;

    if (e.currentTarget === this.current) {
      this.current = null;
      tag = true;
    } else if (e.currentTarget !== this.current) {
      this.current = e.currentTarget;
    }

    [].slice.call(_thisDom?.children)?.map((_item: Element) => {
      _item.firstElementChild
        &&
        (_item.firstElementChild.className = _item.firstElementChild.className.replace('btnItem__active', ''))
    })
    e.currentTarget.className += (tag ? '' : ' btnItem__active');
  }

  reset = () => {
    const { onChange, onBulkChange } = this.props;
    onBulkChange && onBulkChange(this.handleQuery(''));
    onChange && onChange('');
    this.current = null;
  }

  protected renderBtnGroup = (): JSX.Element | null => {
    const { buttons, value } = this.props;
    if (!buttons || !buttons?.length) return null

    return <WrapperBtnGroup>
      {
        buttons.map((_btn: BtnSchema, index: number) => {
          // 1. 初始化:value = '', 样式不生效
          // 2. 点击 item：value = item.value,样式生效
          // 3. 重置：value = '', 样式不生效
          let _current = !value ? '' : (_btn?.value === value ? 'btnItem__active' : '');
          let _disabled = _btn?.disabled ? 'btnItem__disabled' : '';
          let className = classNames('btnItem__inner', _current, _disabled);
          return <div
            style={{
              cursor: _btn?.disabled ? 'not-allowed' : 'pointer',
              pointerEvents: _btn?.disabled ? 'none' : 'auto'
            }}
            onClick={(e: any) => { this.handleChange(e, _btn?.value) }} className="btnItem" key={_btn.value}>
            <span
              onClick={this.handleActive}
              className={className}
              style={{
                cursor: _btn?.disabled ? 'not-allowed' : 'pointer',
                pointerEvents: _btn?.disabled ? 'none' : 'auto'
              }}
            >
              {_btn?.label}
            </span>
          </div>
        })
      }
    </WrapperBtnGroup >
  }

  render() {
    return this.renderBtnGroup()
  }
}

@OptionsControl({
  type: 'lion-btn-group',
  strictMode: false
  //  使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入 strictMode: false 来关闭
})
export class LionBtnGroupRenderer extends LionBtnGroup { }