import { af as le, is as B, hY as c, iB as U, iC as ce, iD as pe, hX as he, iE as fe, iF as ge, iG as ue, iH as me, iI as xe, Y as i, a6 as d, G as y, F as e, iJ as A, iK as O, iL as N, iM as be, iN as ye, cC as we, iO as ke, iP as L, as as _, ez as Se, c5 as W, iQ as ve, iR as D, gj as Ce, iS as Ae, gh as g, iT as Ee, iU as Me, iV as Re, ah as z, iW as $e, iX as F, ge as H, gJ as Y, iY as Ie, X as t, av as Te, iZ as Be, ey as Le, i_ as _e, i$ as De, j0 as Fe, j1 as He, j2 as Pe, j3 as je, j4 as Ue, j5 as Oe, fB as Ne, j6 as We, j7 as ze } from "./603b75d9.js";
import { H as Ye, P as Ve, A as Ge, a as V, b as Xe } from "./b15ebc70.js";
import { useContext as S, useState as x, useRef as Je, useEffect as Ke, useMemo as Qe } from "react";
import "react-dom";
import "./d13144d5.js";
const {
  Countdown: Ze
} = ze, {
  Text: qe
} = Ie, G = t.a`
  display: flex;
  align-items: center;
  margin-right: 12px;
`;
t(Fe)`
  min-width: 24px;
  max-width: 24px;
`;
const w = Te`
  &:hover {
    background-color: #8b8fa34c;
  }

  & g g {
    stroke: ${(o) => o.$show ? "#dddddd" : "#dddddd65"};
  }

  &:hover g g {
    stroke: #ffffff;
  }

  cursor: pointer;
`;
t(He)`
  ${w}
`;
const et = t(Pe)`
  ${w}
`, tt = t(je)`
  ${w}
  & g line {
    stroke: ${(o) => o.$show ? "#dddddd" : "#dddddd65"};
  }

  &:hover g line {
    stroke: #ffffff;
  }

  & g rect {
    stroke: ${(o) => o.$show ? "#dddddd" : "#dddddd65"};
  }

  &:hover g rect {
    stroke: #ffffff;
  }
`, ot = t(Ue)`
  ${w}
`, v = t.div`
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;

  ${(o) => o.disabled && `
    svg {
       pointer-events: none;
       g g {
         stroke: #dddddd30;
       }
    }
    cursor: not-allowed;  
  `}
`, it = t(g)`
  padding: 4px 12px;
  height: 28px;
  background: #4965f2;
  border-radius: 4px 0 0 4px;
`, nt = t.div`
  margin-left: 14px;
  display: flex;
  gap: 8px;
`, rt = t(g)`
  padding: 4px 7px;
  height: 28px;

  &:disabled,
  &:disabled:hover {
    background: #4965f2;
    border: 1px solid #4965f2;
    color: #ffffff;
    opacity: 0.35;
  }
`, at = t(g)`
  padding: 4px 7px;
  height: 28px;
  margin-right: 4px;
`, P = t(g)`
  &&& {
    color: #ffffff;
    background: #8b8fa34c;
    border: none;
    height: 28px;
    padding: 4px 13px;
    margin-right: 8px;
    cursor: pointer;
    --antd-wave-shadow-color: #8b8fa34c;

    &:hover {
      background: #666666;
      color: #ffffff;
      border: none;
    }

    &:focus {
      background: #666666;
      color: #ffffff;
      border: none;
    }
    
    &[disabled] {
      cursor: not-allowed;
    }
  }
`, dt = t.span`
  font-size: 12px;
  color: #b8b9bf;
  line-height: 12px;
  margin-left: -22px;
`;
t(Y)`
  transform: rotate(180deg);
  margin-left: 4px;
  min-width: 18px;

  path {
    fill: #ffffff;
  }
`;
const st = t(g)`
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 0 4px 4px 0;
  margin-right: 24px;
  margin-left: 1px;

  svg {
    transform: rotate(180deg);
    width: 18px;

    path {
      fill: #ffffff;
    }
  }

  &.ant-dropdown-open {
    background-color: #3a51c2;
    border-color: #3a51c2;
  }
`;
t(z)`
  &.ant-dropdown-open {
    background-color: #8b8fa34c;
  }
`;
const lt = t.div`
  .taco-edit-text-wrapper {
    width: fit-content;
    max-width: 288px;
  }

  input {
    width: 288px;
    border-radius: 4px;
  }
`;
t.div`
  display: inline-flex;
  align-items: center;
  margin-right: 4px;

  &.module svg {
    visibility: visible;
  }
`;
const ct = t.div`
  display: flex;
  align-items: center;
  background-color: #ffe6e6; /* Light red background for warning */
  padding: 2px 8px;
  border-radius: 5px;
  margin-right: 8px;
`, pt = t.span`
  margin-left: 8px;
  font-size: 12px;
  color: #ff4d4f; /* Red color to indicate warning */
`, ht = t(Oe)`
  margin-left: 8px;
  font-size: 16px;
  color: #ff4d4f; /* Red color for the icon */
`, ft = t(Ze)`
  .ant-statistic-content {
    color: #ff4d4f;
    margin-top: 2px;
    text-align: center;
  }
`, gt = t(Ne)`
  width: 16px !important;
  height: 16px !important;
  margin-right: -3px !important;
  > g > g {
    stroke: white;
  }
`, ut = t(We)`
  .ant-dropdown-menu-item:hover {
    background: ${(o) => o.disabled ? "inherit" : "#edf4fa"};
    cursor: ${(o) => o.disabled ? "not-allowed" : "pointer"};
  }
`;
function C(o) {
  const {
    user: s
  } = o;
  return c(Be) ? /* @__PURE__ */ e(Le.Avatar, {
    shape: "circle",
    size: 28
  }) : /* @__PURE__ */ e("div", {
    children: s.isAnonymous ? /* @__PURE__ */ e(at, {
      buttonType: "primary",
      onClick: () => A.push(_e),
      children: i("userAuth.login")
    }) : /* @__PURE__ */ e(Xe, {
      user: s,
      profileSide: 28,
      fontSize: 12
    })
  });
}
const j = () => W().add(3, "minutes").toISOString();
function kt(o) {
  const s = S(le), {
    blockEditing: r,
    fetchApplication: b
  } = S(B), {
    togglePanel: k
  } = o, {
    toggleEditorModeStatus: X
  } = o, {
    left: J,
    bottom: K,
    right: Q
  } = o.panelStatus, p = c(U), a = c(ce), h = pe(), u = he(), l = c(fe), m = c(ge), {
    appType: Z
  } = S(B), [q, E] = x(!1), [ee, te] = x(!1), [M, R] = x(!1), [f, oe] = x(), [$, I] = x(!1), T = Je(j()), ie = Z === ue.Module;
  Ke(() => {
    r && a && (a != null && a.editingUserId) && me.getUserDetail(a.editingUserId).then((n) => {
      xe(n) && (console.log("editing user", n.data.data), oe(n.data.data));
    });
  }, [r]);
  const ne = [{
    label: i("header.editorMode_layout"),
    tooltip: i("header.editorMode_layout_tooltip"),
    key: "editorModeSelector_layout",
    value: "layout"
  }, {
    label: i("header.editorMode_logic"),
    tooltip: i("header.editorMode_logic_tooltip"),
    key: "editorModeSelector_logic",
    value: "logic"
  }, {
    label: i("header.editorMode_both"),
    key: "editorModeSelector_both",
    value: "both"
  }], re = ({
    target: {
      value: n
    }
  }) => {
    X(n), s.setEditorModeStatus(n);
  }, ae = /* @__PURE__ */ d(y, {
    children: [/* @__PURE__ */ e(G, {
      onClick: () => A.push(O),
      children: /* @__PURE__ */ e(N, {})
    }), q ? /* @__PURE__ */ e(lt, {
      children: /* @__PURE__ */ e(be, {
        prefixIcon: ie && /* @__PURE__ */ e(ye, {}),
        disabled: l,
        style: l ? {
          maxWidth: "fit-content"
        } : {},
        text: (a == null ? void 0 : a.name) ?? "",
        editing: ee,
        onFinish: (n) => {
          if (!n.trim()) {
            we.warning(i("header.nameCheckMessage"));
            return;
          }
          u(ke({
            applicationId: h,
            name: n
          })), E(!1);
        }
      })
    }) : /* @__PURE__ */ e(Ye, {
      setEdit: () => {
        E(!0), te(!0);
      }
    }), l && /* @__PURE__ */ e(dt, {
      children: i("header.viewOnly")
    })]
  }), de = /* @__PURE__ */ d(y, {
    children: [/* @__PURE__ */ e(L.Group, {
      onChange: re,
      value: o.editorModeStatus,
      optionType: "button",
      buttonStyle: "solid",
      size: "small",
      children: ne.map((n) => /* @__PURE__ */ e(_, {
        title: n.tooltip,
        children: /* @__PURE__ */ e(L.Button, {
          value: n.value,
          children: n.label
        }, n.key)
      }, n.key))
    }), /* @__PURE__ */ e(v, {
      children: /* @__PURE__ */ e(et, {
        onClick: () => k("left"),
        $show: J
      })
    }), /* @__PURE__ */ e(v, {
      children: /* @__PURE__ */ e(tt, {
        onClick: () => k("bottom"),
        $show: K
      })
    }), /* @__PURE__ */ e(v, {
      disabled: l,
      children: /* @__PURE__ */ e(ot, {
        onClick: () => k("right"),
        $show: Q
      })
    }), l && /* @__PURE__ */ d(nt, {
      children: [/* @__PURE__ */ e(rt, {
        disabled: !m,
        buttonType: "primary",
        onClick: () => {
          !a || !m || Se.confirm({
            title: i("header.recoverAppSnapshotTitle"),
            content: i("header.recoverAppSnapshotContent", {
              time: W(m.createTime).format("YYYY-MM-DD HH:mm")
            }),
            onConfirm: () => {
              u(ve(a.applicationId, m.snapshotId, m.createTime));
            }
          });
        },
        children: i("header.recoverAppSnapshotMessage")
      }), /* @__PURE__ */ e(P, {
        onClick: () => u(D(!1)),
        children: i("header.returnEdit")
      })]
    })]
  }), se = Qe(() => l ? /* @__PURE__ */ e(C, {
    user: p
  }) : /* @__PURE__ */ d(y, {
    children: [r && /* @__PURE__ */ e(y, {
      children: /* @__PURE__ */ e(Ce, {
        style: {
          width: 200
        },
        content: () => /* @__PURE__ */ d(Ae, {
          vertical: !0,
          gap: 10,
          align: "center",
          style: {
            maxWidth: "250px"
          },
          children: [/* @__PURE__ */ e(qe, {
            style: {
              textAlign: "center"
            },
            children: i("header.AppEditingBlockedHint")
          }), /* @__PURE__ */ e(ft, {
            title: i("header.AppEditingBlocked"),
            value: T.current,
            onFinish: () => {
              I(!0);
            }
          }), /* @__PURE__ */ e(_, {
            title: i("header.AppEditingBlockedMessage"),
            placement: "bottom",
            children: /* @__PURE__ */ d(g, {
              style: {
                width: "100%"
              },
              buttonType: "primary",
              disabled: r && !$,
              onClick: () => {
                b == null || b(), I(!1), T.current = j();
              },
              children: [/* @__PURE__ */ e(gt, {}), /* @__PURE__ */ e("span", {
                children: i("header.AppEditingBlockedCheckStatus")
              })]
            })
          })]
        }),
        trigger: "hover",
        children: /* @__PURE__ */ d(ct, {
          children: [/* @__PURE__ */ e(Ve, {
            source: p.avatarUrl,
            userName: p.username,
            side: 24
          }), /* @__PURE__ */ e(pt, {
            children: `${(f == null ? void 0 : f.email) || i("header.AppEditingBlockedSomeone")} ` + i("header.AppEditingBlockedMessageSnipped")
          }), /* @__PURE__ */ e(ht, {})]
        })
      })
    }), h && /* @__PURE__ */ e(Ge, {
      applicationId: h,
      visible: M,
      onVisibleChange: (n) => !n && R(!1)
    }), Ee(p, a) && /* @__PURE__ */ e(P, {
      onClick: () => R(!0),
      disabled: r,
      children: Me
    }), /* @__PURE__ */ e(it, {
      buttonType: "primary",
      onClick: () => Re(h),
      children: i("header.preview")
    }), /* @__PURE__ */ e(z, {
      className: "cypress-header-dropdown",
      placement: "bottomRight",
      trigger: ["click"],
      dropdownRender: () => /* @__PURE__ */ e(ut, {
        style: {
          minWidth: "110px",
          borderRadius: "4px"
        },
        onClick: (n) => {
          r || (n.key === "deploy" ? u($e({
            applicationId: h
          })) : n.key === "snapshot" && u(D(!0)));
        },
        items: [{
          key: "deploy",
          label: /* @__PURE__ */ d("div", {
            style: {
              display: "flex",
              alignItems: "center"
            },
            children: [r && /* @__PURE__ */ e(F, {
              style: {
                marginRight: "8px"
              }
            }), /* @__PURE__ */ e(H, {
              style: {
                color: r ? "#ccc" : "#222"
              },
              children: i("header.deploy")
            })]
          }),
          disabled: r
        }, {
          key: "snapshot",
          label: /* @__PURE__ */ d("div", {
            style: {
              display: "flex",
              alignItems: "center"
            },
            children: [r && /* @__PURE__ */ e(F, {
              style: {
                marginRight: "8px"
              }
            }), /* @__PURE__ */ e(H, {
              style: {
                color: r ? "#ccc" : "#222"
              },
              children: i("header.snapshot")
            })]
          }),
          disabled: r
        }]
      }),
      children: /* @__PURE__ */ e(st, {
        buttonType: "primary",
        disabled: r,
        children: /* @__PURE__ */ e(Y, {})
      })
    }), /* @__PURE__ */ e(C, {
      user: p
    })]
  }), [
    p,
    l,
    h,
    M,
    r,
    // Include the state in the dependency array
    $,
    f == null ? void 0 : f.name
  ]);
  return /* @__PURE__ */ e(V, {
    headerStart: ae,
    headerMiddle: de,
    headerEnd: se
  });
}
function St() {
  const o = c(U), s = c(De);
  return /* @__PURE__ */ e(V, {
    headerStart: /* @__PURE__ */ e(G, {
      onClick: () => A.push(O),
      children: /* @__PURE__ */ e(N, {})
    }),
    headerEnd: /* @__PURE__ */ e(C, {
      user: o
    }),
    style: o.orgDev ? {} : {
      backgroundColor: s == null ? void 0 : s.headerColor
    }
  });
}
export {
  St as AppHeader,
  kt as default
};
