import { R as e, l as r, P as t, F as o, D as i, m as a, S as d, n as s } from "./antd-2abdded3.js";
import { H as n, P as l, A as p, a as c, b as h } from "./AppPermissionDialog-68667112.js";
import { a8 as m, e8 as f, dI as g, eh as u, ei as x, ej as b, ek as y, dH as k, el as j, em as v, en as w, eo as S, ac as C, ep as M, eq as A, er as $, es as E, et as I, e0 as B, eu as T, ev as z, ew as _, ex as D, ey as R, ez as F, eA as H, eB as q, eC as Y, eD as G, dQ as P, eE as U, eF as L, eG as N, eH as O, eI as W, eJ as J, eK as K, eL as Q, eM as V, eN as Z, eO as X } from "./index-f927b013.js";
import { useContext as ee, useState as re, useRef as te, useEffect as oe, useMemo as ie } from "react";
import { lI as ae, lJ as de, lz as se, mF as ne, mG as le } from "./ant-design-icons-6bfdc7d5.js";
import { d as pe } from "./dayjs-2035e031.js";
import { u as ce, a as he } from "./styled-components-7cfa37e6.js";
import "react-dom";
import "./alasql-f60045ee.js";
import "./lodash-b5661970.js";
import "./customerService-d62a9c61.js";
import "./folderSelector-e6108de8.js";
import "./axios-04f95181.js";
import "./redux-devtools-8dd21e4f.js";
import "./fontawesome-3904a214.js";
import "./dnd-kit-8227a2db.js";
import "./moment-059406e8.js";
import "./numbro-47982265.js";
import "./papaparse-07642d76.js";
import "./uuid-bd83cae2.js";
import "./supabase-b2e314d0.js";
import "./fetch-648a91f6.js";
import "./react-draggable-ed505bfc.js";
import "./remark-gfm-18306abe.js";
import "./buffer-d3713d77.js";
import "./rehype-raw-6ebcba88.js";
import "./parse5-f837f753.js";
import "./rehype-sanitize-953d0761.js";
import "./simplebar-react-2133d981.js";
import "./react-best-gradient-color-picker-92c01739.js";
import "./ua-parser-js-c952c07b.js";
import "./clsx-469c2c43.js";
import "./loglevel-b4003767.js";
import "./file-saver-55285fc1.js";
import "./codemirror-8412b963.js";
import "./really-relaxed-json-056be70b.js";
import "./immer-c0428a8d.js";
import "./hotkeys-js-699906bc.js";
import "./cnchar-e1339167.js";
import "./react-documents-041601c7.js";
import "./react-sortable-hoc-4fbe0c32.js";
import "./sql-formatter-577b4ab0.js";
import "./rc-trigger-3f038851.js";
import "./react-json-view-5330ce92.js";
import "./qrcode-react-d377d762.js";
const { Countdown: me } = s, { Text: fe } = a, ge = ce.a`
  display: flex;
  align-items: center;
  margin-right: 12px;
`;
ce(W)`
  min-width: 24px;
  max-width: 24px;
`;
const ue = he`
  &:hover {
    background-color: #8b8fa34c;
  }

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

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

  cursor: pointer;
`;
ce(J)`
  ${ue}
`;
const xe = ce(K)`
  ${ue}
`, be = ce(Q)`
  ${ue}
  & g line {
    stroke: ${(e2) => e2.$show ? "#dddddd" : "#dddddd65"};
  }

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

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

  &:hover g rect {
    stroke: #ffffff;
  }
`, ye = ce(V)`
  ${ue}
`, ke = ce.div`
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;

  ${(e2) => e2.disabled && "\n    svg {\n       pointer-events: none;\n       g g {\n         stroke: #dddddd30;\n       }\n    }\n    cursor: not-allowed;  \n  "}
`, je = ce(R)`
  padding: 4px 12px;
  height: 28px;
  background: #4965f2;
  border-radius: 4px 0 0 4px;
`, ve = ce.div`
  margin-left: 14px;
  display: flex;
  gap: 8px;
`, we = ce(R)`
  padding: 4px 7px;
  height: 28px;

  &:disabled,
  &:disabled:hover {
    background: #4965f2;
    border: 1px solid #4965f2;
    color: #ffffff;
    opacity: 0.35;
  }
`, Se = ce(R)`
  padding: 4px 7px;
  height: 28px;
  margin-right: 4px;
`, Ce = ce(R)`
  &&& {
    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;
    }
  }
`, Me = ce.span`
  font-size: 12px;
  color: #b8b9bf;
  line-height: 12px;
  margin-left: -22px;
`;
ce(P)`
  transform: rotate(180deg);
  margin-left: 4px;
  min-width: 18px;

  path {
    fill: #ffffff;
  }
`;
const Ae = ce(R)`
  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;
  }
`;
ce(i)`
  &.ant-dropdown-open {
    background-color: #8b8fa34c;
  }
`;
const $e = ce.div`
  .taco-edit-text-wrapper {
    width: fit-content;
    max-width: 288px;
  }

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

  &.module svg {
    visibility: visible;
  }
`;
const Ee = ce.div`
  display: flex;
  align-items: center;
  background-color: #ffe6e6; /* Light red background for warning */
  padding: 2px 8px;
  border-radius: 5px;
  margin-right: 8px;
`, Ie = ce.span`
  margin-left: 8px;
  font-size: 12px;
  color: #ff4d4f; /* Red color to indicate warning */
`, Be = ce(le)`
  margin-left: 8px;
  font-size: 16px;
  color: #ff4d4f; /* Red color for the icon */
`, Te = ce(me)`
  .ant-statistic-content {
    color: #ff4d4f;
    margin-top: 2px;
    text-align: center;
  }
`, ze = ce(Z)`
  width: 16px !important;
  height: 16px !important;
  margin-right: -3px !important;
  > g > g {
    stroke: white;
  }
`, _e = ce(X)`
  .ant-dropdown-menu-item:hover {
    background: ${(e2) => e2.disabled ? "inherit" : "#edf4fa"};
    cursor: ${(e2) => e2.disabled ? "not-allowed" : "pointer"};
  }
`;
function De(e2) {
  const { user: r2 } = e2;
  return g(U) ? se(d.Avatar, { shape: "circle", size: 28 }) : se("div", { children: r2.isAnonymous ? se(Se, { buttonType: "primary", onClick: () => M.push(L), children: C("userAuth.login") }) : se(h, { user: r2, profileSide: 28, fontSize: 12 }) });
}
const Re = () => pe().add(3, "minutes").toISOString();
function Fe(a2) {
  const d2 = ee(m), { blockEditing: s2, fetchApplication: h2 } = ee(f), { togglePanel: U2 } = a2, { toggleEditorModeStatus: L2 } = a2, { left: O2, bottom: W2, right: J2 } = a2.panelStatus, K2 = g(u), Q2 = g(x), V2 = g(b), Z2 = y(), X2 = k(), le2 = g(j), { selectedSnapshot: ce2, isArchivedSnapshot: he2 } = g(v), { appType: me2 } = ee(f), [ue2, Se2] = re(false), [Fe2, He2] = re(false), [qe, Ye] = re(false), [Ge, Pe] = re(), [Ue, Le] = re(false), Ne = te(Re()), Oe = me2 === N.Module;
  oe(() => {
    s2 && Q2 && Boolean(Q2 == null ? void 0 : Q2.editingUserId) && w.getUserDetail(Q2.editingUserId).then((e2) => {
      S(e2) && Pe(e2.data.data);
    });
  }, [s2]);
  const We = [{ label: C("header.editorMode_layout"), tooltip: C("header.editorMode_layout_tooltip"), key: "editorModeSelector_layout", value: "layout" }, { label: C("header.editorMode_logic"), tooltip: C("header.editorMode_logic_tooltip"), key: "editorModeSelector_logic", value: "logic" }, { label: C("header.editorMode_both"), key: "editorModeSelector_both", value: "both" }], Je = ae(de, { children: [se(ge, { onClick: () => M.push(A), children: se($, {}) }), ue2 ? se($e, { children: se(E, { prefixIcon: Oe && se(I, {}), disabled: le2, style: le2 ? { maxWidth: "fit-content" } : {}, text: (Q2 == null ? void 0 : Q2.name) ?? "", editing: Fe2, onFinish: (e2) => {
    e2.trim() ? (X2(T({ applicationId: Z2, name: e2 })), Se2(false)) : B.warning(C("header.nameCheckMessage"));
  } }) }) : se(n, { setEdit: () => {
    Se2(true), He2(true);
  } }), le2 && se(Me, { children: C("header.viewOnly") })] }), Ke = ae(de, { children: [se(e.Group, { onChange: ({ target: { value: e2 } }) => {
    L2(e2), d2.setEditorModeStatus(e2);
  }, value: a2.editorModeStatus, optionType: "button", buttonStyle: "solid", size: "small", children: We.map((t2) => se(r, { title: t2.tooltip, children: se(e.Button, { value: t2.value, children: t2.label }, t2.key) }, t2.key)) }), se(ke, { children: se(xe, { onClick: () => U2("left"), $show: O2 }) }), se(ke, { children: se(be, { onClick: () => U2("bottom"), $show: W2 }) }), se(ke, { disabled: le2, children: se(ye, { onClick: () => U2("right"), $show: J2 }) }), le2 && ae(ve, { children: [se(we, { disabled: !ce2, buttonType: "primary", onClick: () => {
    Q2 && ce2 && z.confirm({ title: C("header.recoverAppSnapshotTitle"), content: C("header.recoverAppSnapshotContent", { time: pe(ce2.createTime).format("YYYY-MM-DD HH:mm") }), onConfirm: () => {
      X2(_(Q2.applicationId, ce2.snapshotId, ce2.createTime, he2));
    } });
  }, children: C("header.recoverAppSnapshotMessage") }), se(Ce, { onClick: () => X2(D(false)), children: C("header.returnEdit") })] })] }), Qe = ie(() => le2 ? se(De, { user: K2 }) : ae(de, { children: [s2 && Boolean(Z2) && se(de, { children: se(t, { style: { width: 200 }, content: () => ae(o, { vertical: true, gap: 10, align: "center", style: { maxWidth: "250px" }, children: [se(fe, { style: { textAlign: "center" }, children: C("header.AppEditingBlockedHint") }), se(Te, { title: C("header.AppEditingBlocked"), value: Ne.current, onFinish: () => {
    Le(true);
  } }), se(r, { title: C("header.AppEditingBlockedMessage"), placement: "bottom", children: ae(R, { style: { width: "100%" }, buttonType: "primary", disabled: s2 && !Ue, onClick: () => {
    h2 == null ? void 0 : h2(), Le(false), Ne.current = Re();
  }, children: [se(ze, {}), se("span", { children: C("header.AppEditingBlockedCheckStatus") })] }) })] }), trigger: "hover", children: ae(Ee, { children: [se(l, { source: K2.avatarUrl, userName: K2.username, side: 24 }), se(Ie, { children: `${(Ge == null ? void 0 : Ge.email) || C("header.AppEditingBlockedSomeone")} ` + C("header.AppEditingBlockedMessageSnipped") }), se(Be, {})] }) }) }), Boolean(Z2) && !V2 && se(p, { applicationId: Z2, visible: qe, onVisibleChange: (e2) => !e2 && Ye(false) }), F(K2, Q2) && se(Ce, { onClick: () => Ye(true), disabled: s2, children: H }), se(je, { buttonType: "primary", onClick: () => q(Z2), children: C("header.preview") }), se(i, { className: "cypress-header-dropdown", placement: "bottomRight", trigger: ["click"], dropdownRender: () => se(_e, { style: { minWidth: "110px", borderRadius: "4px" }, onClick: (e2) => {
    s2 || ("deploy" === e2.key ? X2(Y({ applicationId: Z2 })) : "snapshot" === e2.key && X2(D(true)));
  }, items: [{ key: "deploy", label: ae("div", { style: { display: "flex", alignItems: "center" }, children: [s2 && se(ne, { style: { marginRight: "8px" } }), se(G, { style: { color: s2 ? "#ccc" : "#222" }, children: C("header.deploy") })] }), disabled: s2 }, { key: "snapshot", label: ae("div", { style: { display: "flex", alignItems: "center" }, children: [s2 && se(ne, { style: { marginRight: "8px" } }), se(G, { style: { color: s2 ? "#ccc" : "#222" }, children: C("header.snapshot") })] }), disabled: s2 }] }), children: se(Ae, { buttonType: "primary", disabled: s2, children: se(P, {}) }) }), se(De, { user: K2 })] }), [K2, le2, Z2, qe, s2, Ue, Ge == null ? void 0 : Ge.name]);
  return se(c, { headerStart: Je, headerMiddle: Ke, headerEnd: Qe });
}
function He() {
  const e2 = g(u), r2 = g(O);
  return se(c, { headerStart: se(ge, { onClick: () => M.push(A), children: se($, {}) }), headerEnd: se(De, { user: e2 }), style: e2.orgDev ? {} : { backgroundColor: r2 == null ? void 0 : r2.headerColor } });
}
export {
  He as AppHeader,
  Fe as default
};
