import { ArrowChevronLeft16BoldBlueIcon } from '@cloudtower/icons-react';
import { cx } from '@linaria/core';
import Button from '../Button/index.js';
import { ImmersiveDialog } from '../ImmersiveDialog/index.js';
import Steps from '../Steps/index.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';
import React__default, { useState, useMemo, useEffect } from 'react';
import { StepContentStyle, PrevIconStyle, StepStyle, RightPanelStyle } from './styles.js';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
function WizardDialog(props) {
  const _a = props, {
    className,
    steps,
    step,
    children,
    hideSteps,
    destroyOtherStep,
    prevText,
    nextText,
    onPrevStep,
    onNextStep,
    onStepChange,
    left,
    right,
    rightClassName,
    okText,
    onOk,
    "data-testid": dataTestId
  } = _a, restProps = __objRest(_a, [
    "className",
    "steps",
    "step",
    "children",
    "hideSteps",
    "destroyOtherStep",
    "prevText",
    "nextText",
    "onPrevStep",
    "onNextStep",
    "onStepChange",
    "left",
    "right",
    "rightClassName",
    "okText",
    "onOk",
    "data-testid"
  ]);
  const { t } = useParrotTranslation();
  const [_step, _setStep] = useState(step || 0);
  const stepVal = useMemo(() => step != null ? step : _step, [step, _step]);
  const content = useMemo(() => {
    var _a2;
    if (destroyOtherStep) {
      return ((_a2 = steps == null ? void 0 : steps[stepVal]) == null ? void 0 : _a2.children) || children;
    }
    return (steps == null ? void 0 : steps.map((s, index) => /* @__PURE__ */ React__default.createElement(
      "div",
      {
        key: s.title,
        className: StepContentStyle,
        style: {
          display: stepVal === index ? "block" : "none"
        }
      },
      s.children
    ))) || children;
  }, [children, destroyOtherStep, steps, stepVal]);
  const _confirmText = useMemo(() => {
    let text = okText || t("common.confirm");
    if (steps == null ? void 0 : steps.length) {
      text = stepVal < steps.length - 1 ? nextText || t("common.next_step") : text;
    }
    return text;
  }, [okText, t, steps == null ? void 0 : steps.length, stepVal, nextText]);
  useEffect(() => {
    if (step) {
      _setStep(step);
    }
  }, [step]);
  return /* @__PURE__ */ React__default.createElement(
    ImmersiveDialog,
    __spreadProps(__spreadValues({
      className,
      "data-testid": dataTestId,
      footerLeftAction: stepVal > 0 ? /* @__PURE__ */ React__default.createElement(
        Button,
        {
          type: "link",
          "data-testid": dataTestId ? `${dataTestId}-prev` : void 0,
          onClick: () => {
            const newStep = stepVal - 1;
            _setStep(newStep);
            onPrevStep == null ? void 0 : onPrevStep(newStep);
            onStepChange == null ? void 0 : onStepChange(newStep);
          }
        },
        /* @__PURE__ */ React__default.createElement(ArrowChevronLeft16BoldBlueIcon, { className: PrevIconStyle }),
        prevText || t("common.prev_step")
      ) : null,
      left: left || (steps && steps.length > 0 && !hideSteps ? /* @__PURE__ */ React__default.createElement(
        Steps,
        {
          containerClassname: StepStyle,
          current: stepVal,
          onChange: (value) => {
            _setStep(value);
            onStepChange == null ? void 0 : onStepChange(value);
          },
          direction: "vertical",
          stepsConfig: steps.map((s) => ({
            title: s.title,
            "data-testid": s["data-testid"]
          }))
        }
      ) : null),
      right,
      okText: _confirmText,
      onOk: (e) => {
        if (stepVal < ((steps == null ? void 0 : steps.length) || 0) - 1) {
          const newStep = stepVal + 1;
          const prevent = (onNextStep == null ? void 0 : onNextStep(newStep)) === false;
          if (!prevent) {
            _setStep(newStep);
            onStepChange == null ? void 0 : onStepChange(newStep);
          }
        } else {
          onOk == null ? void 0 : onOk(e);
        }
      },
      rightClassName: cx(RightPanelStyle, rightClassName)
    }, restProps), {
      isContentFull: false
    }),
    content
  );
}

export { WizardDialog };
