import React, { useMemo } from 'react';
import { Button, ACCENT_TYPES } from '../../button';
import { Stepper } from '../../stepper';
import { TruncateWithTooltip } from '../../truncate-with-tooltip';
import { useTranslation } from '../../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export function FullScreenDrawerHeader({
  children,
  onDismiss,
  title = '',
  activeStepKey,
  stepperTestId = 'header-section-stepper',
  steps,
  onStepClick,
  buttons,
  showUnsavedDataDialog = false,
  setShowUnsavedDataDialog,
  dismissWarningText,
  localizationText: localizationTextParams = {},
  unsavedDataDialogButtons
}) {
  const {
    t
  } = useTranslation();
  const localizationText = {
    cancelButton: t('Close'),
    keepDrawer: t('Continue setup'),
    closeWithoutSaving: t('Exit without saving'),
    ...localizationTextParams
  };
  const onContinueSetup = () => {
    setShowUnsavedDataDialog?.(false);
  };
  const cancelBtn = useMemo(() => /*#__PURE__*/_jsx(Button, {
    testId: "drawer-dismiss-button",
    onClick: onDismiss,
    accentType: ACCENT_TYPES.GHOST,
    children: localizationText?.cancelButton
  }, "drawer-dismiss-button"), [onDismiss, localizationText?.cancelButton]);
  const buttonList = useMemo(() => buttons ? [cancelBtn, ...buttons] : [cancelBtn], [buttons, cancelBtn]);
  const unsavedButtons = unsavedDataDialogButtons || [/*#__PURE__*/_jsx(Button, {
    testId: "continue-setup",
    className: "warning-button-continue",
    onClick: onContinueSetup,
    accentType: ACCENT_TYPES.SECONDARY,
    children: localizationText?.keepDrawer
  }, "continue-setup"), /*#__PURE__*/_jsx(Button, {
    testId: "exit-setup",
    onClick: onDismiss,
    className: "warning-button-exit",
    accentType: ACCENT_TYPES.ATTENTION,
    children: localizationText?.closeWithoutSaving
  }, "exit-setup")];
  return /*#__PURE__*/_jsx("div", {
    className: "full-screen-drawer-header-wrapper",
    "test-id": "full-screen-drawer-header",
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [title && /*#__PURE__*/_jsx("h2", {
        "test-id": "drawer-title",
        className: "drawer-title",
        children: title
      }), showUnsavedDataDialog ? /*#__PURE__*/_jsxs("div", {
        className: "dismiss-button-section",
        children: [dismissWarningText ? /*#__PURE__*/_jsx(TruncateWithTooltip, {
          children: /*#__PURE__*/_jsx("span", {
            className: "dismiss-warning-text",
            children: dismissWarningText
          })
        }) : null, /*#__PURE__*/_jsx("div", {
          className: "dismiss-warning-dialog",
          children: unsavedButtons
        })]
      }) : /*#__PURE__*/_jsxs(_Fragment, {
        children: [children && /*#__PURE__*/_jsx("div", {
          "test-id": "custom-header-section",
          className: "custom-header",
          children: children
        }), steps && onStepClick && /*#__PURE__*/_jsx("div", {
          className: "header-section-stepper",
          children: /*#__PURE__*/_jsx(Stepper, {
            testId: stepperTestId,
            steps: steps,
            onClick: onStepClick,
            activeKey: activeStepKey
          })
        }), buttonList && /*#__PURE__*/_jsx("div", {
          className: "header-section-buttons",
          children: buttonList
        })]
      })]
    })
  });
}