import * as React from 'react';
import { FastButton, FastTooltip, FastIcon } from "components/ui";
import { Component } from "components/types";
import useAction from "./useAction";
import { ActionProps } from "./types";
import { isEmpty } from "utils/isType";

function Action(props: ActionProps) {
  const { action, data, params = {} } = props;
  const { label, desc } = action;

  const {
    submitting,
    handleSubmit,
    handleResult,
    handleLink,
    handleRoute,
    handleFetch,
    handleCancel,
    handleConfirm,
  } = useAction(props);

  const renderDesc = () => {
    return (
      <FastTooltip
        title={
          <span className="fs-12">
            {(desc as Component.Business.Desc).text}
          </span>
        }
      >
        <FastIcon.QuestionCircleOutlined className="ml-4" />
      </FastTooltip>
    );
  };

  const handleClick = (actionConfig: Component.Business.Action) => {
    const { type } = actionConfig;
    const { onActionClick, bindActionClick } = props;
    if (onActionClick) {
      onActionClick(actionConfig).then(handleResult);
    } else if (type === Component.Business.TriggerType.confirm) {
      handleConfirm();
    } else if (type === Component.Business.TriggerType.link) {
      handleLink();
    } else if (type === Component.Business.TriggerType.route) {
      handleRoute();
    } else if (type === Component.Business.TriggerType.fetch) {
      handleFetch().then(handleResult);
    } else if (type === Component.Business.TriggerType.cancel) {
      handleCancel();
    } else if (type === Component.Business.TriggerType.submit) {
      if (bindActionClick) bindActionClick().then(handleSubmit);
      else {
        handleSubmit();
      }
    } else {
      handleResult(data);
    }
  };

  const createActionBtn = (actionConfig: Component.Business.Action) => {
    const {
      key,
      type: actionType,
      status,
      btnSize = "middle",
      btnType = "primary",
    } = actionConfig;
    // 控制显隐
    let isShow = true;
    // 控制不可点击
    let isDisabled = false;
    if (status) {
      const {
        type: statusType,
        trigger,
        triggerKey,
        triggerValue,
      } = status;
      if (statusType === Component.Business.ResultType.show) {
        if (trigger === Component.Business.TriggerType.contain) {
          if (!triggerValue.includes(data[triggerKey])) {
            isShow = false;
          }
        } else if (trigger === Component.Business.TriggerType.notContain) {
          if (
            triggerValue.includes(data[triggerKey]) ||
            (data[triggerKey] === undefined &&
              triggerValue.includes("undefined"))
          ) {
            isShow = false;
          }
        }
      } else if (statusType === Component.Business.ResultType.disabled) {
        if (trigger === Component.Business.TriggerType.contain) {
          if (!triggerValue.includes(data[triggerKey])) {
            isDisabled = true;
          }
        } else if (trigger === Component.Business.TriggerType.notContain) {
          if (!triggerValue.includes(data[triggerKey])) {
            isDisabled = true;
          }
        }
      }
    }
    if (!isShow) return null;

    // 参数全部为空禁止导出
    if (
      actionType === Component.Business.TriggerType.export &&
      !Object.values(params).some((val: any) => !isEmpty(val))
    ) {
      isDisabled = true;
    }

    return (
      <FastButton
        disabled={isDisabled}
        loading={submitting}
        className="ml-8 mt-2 mb-2"
        key={key}
        type={btnType}
        size={btnSize}
        onClick={() => handleClick(actionConfig)}
      >
        <span>{label}</span>
        <span className="fs-14">{desc ? renderDesc() : null}</span>
      </FastButton>
    );
  };

  return createActionBtn(action);
}

export default Action;