import type { IActivityHandler } from "@vertigis/workflow";

/** An interface that defines the inputs of the activity. */
interface GetElementByDataLayoutIDInputs {
  /**
   * @displayName Data Layout ID
   * @description The data-layout-id of the element to find.
   * @required
   */
  dataLayoutId: string;

  /**
   * @displayName CSS Styles
   * @description The CSS styles to inject into the element.
   * @required
   */
  cssStyles: string;
}

/** An interface that defines the outputs of the activity. */
interface GetElementByDataLayoutIDOutputs {
  /**
   * @description A message indicating the result of the activity.
   */
  result: string;
}

/**
 * @displayName Get Element By DataLayout ID
 * @category EBTA Utilities
 * @description Get Element By DataLayout ID and inject CSS styles V1.
 */
export default class GetElementByDataLayoutIDActivity
  implements IActivityHandler
{
  /** Perform the execution logic of the activity. */
  execute(
    inputs: GetElementByDataLayoutIDInputs
  ): GetElementByDataLayoutIDOutputs {
    const { dataLayoutId, cssStyles } = inputs;
    const element = document.querySelector(
      `[data-layout-id="${dataLayoutId}"]`
    );

    if (!element) {
      return {
        result: `Element with data-layout-id="${dataLayoutId}" not found.`,
      };
    }

    // Inject the CSS styles
    element.setAttribute("style", cssStyles);

    return {
      result: `CSS styles injected into element with data-layout-id="${dataLayoutId}".`,
    };
  }
}