index.tsx

import React, { FC, useState, CSSProperties } from 'react';
import { Button, FormInstance } from 'antd';
import { ButtonType } from 'antd/es/button/buttonHelpers';
import { ShaIcon, IconType } from '@/components/shaIcon';
import classNames from 'classnames';
import { IButtonItem } from '@/providers/buttonGroupConfigurator/models';
import { useConfigurableActionDispatcher } from '@/providers/configurableActionsDispatcher';
import { useAvailableConstantsData } from '@/providers/form/utils';
import { useAsyncMemo } from '@/hooks/useAsyncMemo';
import { IFullAuditedEntity } from '@/publicJsApis/entities';
import { useStyles } from './style';
import { getGhostStyleOverrides } from '@/utils/style';
import { DataContextTopLevels } from '@/providers/dataContextManager';
import { isNavigationActionConfiguration, useShaRouting } from '@/providers/shaRouting';
import { useTheme } from '@/providers/theme';

export interface IConfigurableButtonProps extends Omit<IButtonItem, 'style' | 'itemSubType'> {
  style?: CSSProperties;
  form: FormInstance<any>;
  dynamicItem?: IFullAuditedEntity;
}

export const ConfigurableButton: FC<IConfigurableButtonProps> = (props) => {
  const { actionConfiguration, dynamicItem } = props;
  const { getUrlFromNavigationRequest } = useShaRouting();
  const { executeAction, useActionDynamicContext, prepareArguments } = useConfigurableActionDispatcher();
  const dynamicContext = useActionDynamicContext(actionConfiguration);
  const evaluationContext = useAvailableConstantsData({ topContextId: DataContextTopLevels.Full }, { ...dynamicContext, dynamicItem });

  const { theme } = useTheme();
  const { styles } = useStyles();
  const [loading, setLoading] = useState(false);
  const [isModal, setModal] = useState(false);

  const { buttonLoading, buttonDisabled } = {
    buttonLoading: loading && !isModal,
    buttonDisabled: props.readOnly || (loading && isModal),
  };

  const onButtonClick = (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
    event.preventDefault();

    // Prevent action if button is disabled
    if (buttonDisabled) {
      return;
    }

    try {
      if (actionConfiguration) {
        if (['Show Dialog', 'Show Confirmation Dialog'].includes(actionConfiguration?.actionName)) {
          setModal(true);
        }
        setLoading(true);
        void executeAction({
          actionConfiguration: { ...actionConfiguration },
          argumentsEvaluationContext: evaluationContext,
        })
          .finally(() => {
            setLoading(false);
          });
      } else console.error('Action is not configured');
    } catch (error) {
      setLoading(false);
      console.error('Validation failed:', error);
    }
  };


  const navigationUrl = useAsyncMemo(async () => {
    if (!isNavigationActionConfiguration(actionConfiguration) || !actionConfiguration.actionArguments)
      return undefined;
    const preparedArguments = await prepareArguments({ actionConfiguration, argumentsEvaluationContext: evaluationContext });
    return getUrlFromNavigationRequest(preparedArguments);
  }, [actionConfiguration], "");

  const isSameUrl = navigationUrl === window.location.href;

  // Handle custom 'ghost' buttonType by converting to Ant Design's ghost prop pattern
  const isGhostType = props.buttonType === 'ghost';
  const actualButtonType = isGhostType ? 'default' : (props.buttonType as ButtonType);

  // Ghost buttons: only foreground color, no background/border/shadow
  const ghostOverrides = isGhostType ? getGhostStyleOverrides(props.style) : props.style;

  return (
    <Button
      href={navigationUrl}
      title={props.tooltip}
      block={props.block}
      disabled={buttonDisabled}
      aria-disabled={buttonDisabled}
      tabIndex={buttonDisabled ? -1 : undefined}
      loading={buttonLoading}
      onClick={onButtonClick}
      type={actualButtonType}
      ghost={isGhostType}
      danger={props.danger}
      icon={props.icon ? <ShaIcon iconName={props.icon as IconType} /> : undefined}
      iconPlacement={props.iconPosition}
      className={classNames('sha-toolbar-btn sha-toolbar-btn-configurable', styles.configurableButton)}
      size={props?.size}
      style={{
        ...props?.style,
        ...(isSameUrl && !isGhostType && { background: theme.application.primaryColor, color: theme.text.default }),
        ...ghostOverrides,
        ...(buttonDisabled && { pointerEvents: "none" }),
      }}
    >
      {props.label}
    </Button>
  );
};

export default ConfigurableButton;