import { jsxs, jsx } from 'react/jsx-runtime';
import { c as cx } from './index-SvGbrGuT.js';
import * as React from 'react';
import { forwardRef } from 'react';
import { S as SvgCheck } from './check-Cf67OWrZ.js';
import { C as Card } from './Card-DDH7gI8m.js';
import { T as Text } from './Text-DhheKsns.js';
import { I as Icon } from './Icon-Bcil6aBo.js';
import { B as Button } from './Button-DrNDkO2f.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';

import './EditCard.css';const container = "_container_1bs09_11";
const header = "_header_1bs09_17";
const content = "_content_1bs09_25";
const indicator = "_indicator_1bs09_28";
const heading = "_heading_1bs09_57";
const footer = "_footer_1bs09_60";
const styles = {
	"edit-card": "_edit-card_1bs09_2",
	"edit-card-error": "_edit-card-error_1bs09_5",
	"edit-card-in-progress": "_edit-card-in-progress_1bs09_8",
	container: container,
	header: header,
	content: content,
	indicator: indicator,
	"indicator-in-progress": "_indicator-in-progress_1bs09_39",
	"indicator-complete": "_indicator-complete_1bs09_43",
	"indicator-error": "_indicator-error_1bs09_47",
	heading: heading,
	footer: footer
};

const SvgPriorityHigh = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 19, r: 2 }), /* @__PURE__ */ React.createElement("path", { d: "M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" }));

const EditCard = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      children,
      className,
      style,
      headerText,
      state,
      editButtonText = "Edit",
      saveButtonText = "Save",
      disableEdit = false,
      disableSave = false,
      onStateChange,
      ...rest
    } = componentProps;
    const kebabState = state?.replaceAll(" ", "-");
    const editCardClassNames = cx(
      styles["edit-card"],
      styles[`edit-card-${kebabState}`],
      className
    );
    return /* @__PURE__ */ jsxs(
      Card,
      {
        padding: "large",
        className: editCardClassNames,
        "data-anv": "edit-card",
        style,
        ref,
        ...rest,
        children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(styles.indicator, styles[`indicator-${kebabState}`]),
              children: [
                state === "complete" && /* @__PURE__ */ jsx(Icon, { svg: SvgCheck }),
                state === "error" && /* @__PURE__ */ jsx(Icon, { svg: SvgPriorityHigh })
              ]
            }
          ),
          /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
            /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
              /* @__PURE__ */ jsx(Text, { className: styles.heading, variant: "headline", el: "h3", children: typeof headerText === "string" ? headerText : headerText[state] }),
              state !== "in progress" && /* @__PURE__ */ jsx(
                Button,
                {
                  disabled: disableEdit,
                  onClick: () => onStateChange?.("edit"),
                  children: editButtonText
                }
              )
            ] }),
            children && /* @__PURE__ */ jsx("div", { className: styles.content, style: layoutStyles, children }),
            state === "in progress" && /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
              /* @__PURE__ */ jsx(Button, { onClick: () => onStateChange?.("cancel"), children: "Cancel" }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  appearance: "primary",
                  onClick: () => onStateChange?.("save"),
                  disabled: disableSave,
                  children: saveButtonText
                }
              )
            ] })
          ] })
        ]
      }
    );
  }
);
EditCard.displayName = "EditCard";

export { EditCard as E };
//# sourceMappingURL=EditCard-CH-JE4ba.js.map
