function classNames(...args) {
  const classes = [];

  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    if (!arg) continue;

    const argType = typeof arg;

    if (argType === 'string' || argType === 'number') {
      classes.push(arg);
    } else if (Array.isArray(arg)) {
      if (arg.length) {
        const inner = classes.push(classNames(...arg));
        if (inner) {
          classes.push(inner);
        }
      }
    } else if (argType === 'object') {
      if (arg.toString === Object.prototype.toString) {
        Object.keys(arg).forEach((key) => {
          arg[key] && classes.push(key);
        });
      } else {
        classes.push(arg.toString());
      }
    }
  }

  return classes.join(' ');
}

const WD_PREFIX = 'wd'

Component({
  options: {
    virtualHost: true,
    multipleSlots: true,
  },
  behaviors: [],
  properties: {
    className: {
      type: String,
      value: '',
    },
    style: {
      type: String,
      value: '',
    },
    id: {
      type: String,
      value: '',
    },
    defaultShow: {
      type: Boolean,
      value: false,
    },
    position: {
      type: String,
      value: 'bottom',
    },
    closeType: {
      type: Array,
      value: ['mask'],
    },
    defaultMaskShow: {
      type: Boolean,
      value: true,
    },
  },
  data: {
    cls: '',
    styleMain: '',
    styleShow: '',
    classPrefix: WD_PREFIX,
    modalMaskClasses: '', // 遮罩层样式
    modalBdClasses: '', // 主体内容样式
    isBdShow: true, // 弹窗主体内容显示控制
    isMaskShow: false, // 弹窗遮罩层显示控制
    maskPreToShow: false, // 弹窗遮罩层预显示控制，为了动画
    openInfo: null,
    closeInfo: null,
  },
  lifetimes: {
    attached() {
      // this.updateWidgetAPI();
    },
  },
  methods: {
    updateWidgetAPI() {
      this.setReadonlyAttributes &&
        this.setReadonlyAttributes({
          open: this.onOpen.bind(this),
          close: this.onClose.bind(this),
          modalState: this.data.isBdShow ? 'open' : 'close',
          openInfo: this.data.openInfo,
          closeInfo: this.data.closeInfo,
        });
    },
    /**
     * 控制弹窗打开/关闭
     * @param {Boolean} isOpen
     */
    dealShow(isOpen) {
      let setImmediately = {
        maskPreToShow: true,
        isMaskShow: !isOpen,
        isBdShow: isOpen,
      };

      if (!isOpen) {
        setImmediately = {
          isBdShow: isOpen,
          isMaskShow: !isOpen,
          maskPreToShow: false,
        };
      }

      this.setData(setImmediately);

      this.triggerEvent(isOpen ? 'open' : 'close');
    },
    /**
     * 关闭弹窗
     */
    onClose(params) {
      this.dealShow(false);
      this.setData({ closeInfo: params?.info || params });
    },
    /**
     * 开启弹窗
     */
    onOpen(params) {
      this.dealShow(true);
      this.setData({ openInfo: params?.info || params });
    },
    /**
     * 点击遮罩层
     */
    maskClick() {
      if (this.data.closeType.includes('mask')) {
        this.onClose();
      }
    },
  },
  observers: {
    'style,className,position,isMaskShow,defaultMaskShow,isBdShow': function (
      style,
      className,
      position,
      isMaskShow,
      defaultMaskShow,
      isBdShow
    ) {
      const defaultWidth = { center: 'calc(100% - 4.57rem)', bottom: '100%' }[
        position
      ];
      const styleShow = `width: ${defaultWidth};` + style;
      const styleMain = style?.match(/(display:).*?(;)/g)?.join('');

      // 响应式css api
      const cls = classNames({
        [`${WD_PREFIX}-modal`]: true,
        [`${WD_PREFIX}-modal-center`]: position === 'center',
        [`${WD_PREFIX}-mp-modal`]: true,
        [`${WD_PREFIX}-mp-modal-hide`]: !isBdShow,
        [className]: className,
      });
      // 遮罩层样式
      const modalMaskClasses = classNames({
        [`${WD_PREFIX}-modal-mask`]: true,
        [`${WD_PREFIX}-modal-mask__fadein`]: true,
        [`${WD_PREFIX}-modal-mask__fadeout`]: isMaskShow,
        [`${WD_PREFIX}-modal-mask__hide`]: !defaultMaskShow,
      });
      // 主体内容样式
      const modalBdClasses = classNames({
        'weda-modal-new': true,
        [`${WD_PREFIX}-modal-bd`]: true,
        [`${WD_PREFIX}-modal-bd__toggle`]: isBdShow,
        [`${WD_PREFIX}-modal-bd__box`]:
          !defaultMaskShow && position === 'center',
      });

      this.setData({
        styleMain,
        styleShow,
        cls,
        modalMaskClasses,
        modalBdClasses,
      });
    },
    defaultShow: function (defaultShow) {
      this.dealShow(defaultShow);
    },
    'isBdShow,openInfo,closeInfo': function () {
      this.updateWidgetAPI();
    },
  },
});
