import { R as e, s as t, P as o, F as r, D as i, t as a, p as d, v as s } from "./antd-97b654da.js";
import { b as n, H as l, P as p, A as c, a as f, c as h } from "./materialUtils-a3f26e34.js";
import { cr as m, f7 as g, dW as u, fe as x, ff as b, fg as y, fh as j, dV as k, fi as v, fj as w, fk as S, fl as C, av as A, fm as M, fn as $, fo as _, fp as I, fq as E, eA as B, fr as T, fs as R, ft as z, fu as H, fv as q, fw as D, fx as F, fy as P, fz as U, fA as V, e2 as W, fB as Y, fC as G, fD as L, fE as N, fF as O, fG as J, fH as K, fI as Q, fJ as X, fK as Z, fL as ee } from "./index-2be62fff.js";
import { useContext as te, useState as oe, useRef as re, useEffect as ie, useMemo as ae } from "react";
import { lR as de, lS as se, lA as ne, nf as le, ng as pe } from "./ant-design-icons-14ab96af.js";
import { d as ce } from "./dayjs-7fc5ce65.js";
import { d as fe, l as he } from "./styled-components-c6abe9a3.js";
import { g as me } from "./enterpriseSelectors-1897ddd8.js";
import "react-dom";
import "./alasql-f59e855e.js";
import "./lodash-226cb5b1.js";
import "./crypto-js-8020edb5.js";
import "./customerService-c27e6cd5.js";
import "./redux-saga-1b0a458d.js";
import "./folderSelector-82f1bcf3.js";
import "./loglevel-5e7e37fc.js";
import "./axios-125479b5.js";
import "./redux-devtools-f8b1cd80.js";
import "./react-router-8d1fc2f1.js";
import "./fontawesome-89eb6278.js";
import "./dnd-kit-e67c9595.js";
import "./moment-d8baa15a.js";
import "./numbro-48e81844.js";
import "./papaparse-088c0adc.js";
import "./uuid-82f303b2.js";
import "./supabase-2e4a9112.js";
import "./fetch-6a200310.js";
import "./react-draggable-fda4f1cb.js";
import "./remark-gfm-e9b5dec7.js";
import "./buffer-e20f80c8.js";
import "./rehype-raw-41b6145f.js";
import "./parse5-6476676e.js";
import "./rehype-sanitize-deb53e9a.js";
import "./simplebar-react-cab52c82.js";
import "./react-best-gradient-color-picker-812be7ee.js";
import "./ua-parser-js-1d18a3f8.js";
import "./clsx-469c2c43.js";
import "./codemirror-edf161cb.js";
import "./really-relaxed-json-e5391d6a.js";
import "./immer-c0428a8d.js";
import "./hotkeys-js-0dddb21a.js";
import "./cnchar-8c3eaa86.js";
import "./react-documents-ae08f8b5.js";
import "./sql-formatter-69e8df59.js";
import "./rc-trigger-9e54e169.js";
import "./react-json-view-364658b4.js";
import "./qrcode-react-e4f7745b.js";
import "./katex-cda5b990.js";
import "./ecogis-maps-10bb29cf.js";
import "./devextreme-28d23085.js";
import "./exceljs-1678d36b.js";
import "./file-saver-es-c18fae8f.js";
const { Countdown: ge } = s, { Text: ue } = a, xe = fe.a`
    display: flex;
    align-items: center;
    margin-right: 12px;
`, be = fe(O)`
    min-width: 24px;
    max-width: 24px;
`, ye = he`
    &:hover {
        background-color: #8b8fa34c;
    }

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

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

    cursor: pointer;
`;
fe(J)`
    ${ye}
`;
const je = fe(K)`
    ${ye}
`, ke = fe(Q)`
    ${ye}
    & 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;
    }
`, ve = fe(X)`
    ${ye}
`, we = fe.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  "}
`, Se = fe(q)`
    padding: 4px 12px;
    height: 28px;
    background: #4965f2;
    border-radius: 4px 0 0 4px;
`, Ce = fe.div`
    margin-left: 14px;
    display: flex;
    gap: 8px;
`, Ae = fe(q)`
    padding: 4px 7px;
    height: 28px;

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

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

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

    &.module svg {
        visibility: visible;
    }
`;
const Be = fe.div`
    display: flex;
    align-items: center;
    background-color: #ffe6e6; /* Light red background for warning */
    padding: 2px 8px;
    border-radius: 5px;
    margin-right: 8px;
`, Te = fe.span`
    margin-left: 8px;
    font-size: 12px;
    color: #ff4d4f; /* Red color to indicate warning */
`, Re = fe(pe)`
    margin-left: 8px;
    font-size: 16px;
    color: #ff4d4f; /* Red color for the icon */
`, ze = fe(ge)`
    .ant-statistic-content {
        color: #ff4d4f;
        margin-top: 2px;
        text-align: center;
    }
`, He = fe(Z)`
    width: 16px !important;
    height: 16px !important;
    margin-right: -3px !important;

    > g > g {
        stroke: white;
    }
`, qe = fe.h3`
  display: inline-flex;
  align-items: center;
  margin: 5px;
  color: white;
`, De = fe(ee)`
    .ant-dropdown-menu-item:hover {
        background: ${(e2) => e2.disabled ? "inherit" : "#edf4fa"};
        cursor: ${(e2) => e2.disabled ? "not-allowed" : "pointer"};
    }
`, Fe = fe.img`
    height: 28px;
`;
function Pe(e2) {
  const { user: t2 } = e2;
  return u(Y) ? ne(d.Avatar, { shape: "circle", size: 28 }) : ne("div", { children: t2.isAnonymous ? ne(Me, { buttonType: "primary", onClick: () => M.push(G), children: A("userAuth.login") }) : ne(h, { user: t2, profileSide: 28, fontSize: 12 }) });
}
const Ue = () => ce().add(3, "minutes").toISOString();
function Ve(a2) {
  var _a, _b, _c, _d;
  const d2 = te(m), { blockEditing: s2, fetchApplication: h2 } = te(g), { togglePanel: Y2 } = a2, { toggleEditorModeStatus: G2 } = a2, { left: O2, bottom: J2, right: K2 } = a2.panelStatus, Q2 = u(x), X2 = u(b);
  u(y);
  const Z2 = j(), [ee2, pe2] = oe(""), fe2 = k(), he2 = u(v), { selectedSnapshot: ge2, isArchivedSnapshot: be2 } = u(w), ye2 = u(me), { appType: Me2 } = te(g), [qe2, Ve2] = oe(false), [We2, Ye] = oe(false), [Ge, Le] = oe(false), [Ne, Oe] = oe(), [Je, Ke] = oe(false), Qe = re(Ue()), Xe = Me2 === L.Module;
  ie(() => {
    s2 && X2 && Boolean(X2 == null ? void 0 : X2.editingUserId) && S.getUserDetail(X2.editingUserId).then((e2) => {
      C(e2) && Oe(e2.data.data);
    });
  }, [s2]);
  const Ze = [{ label: A("header.editorMode_layout"), tooltip: A("header.editorMode_layout_tooltip"), key: "editorModeSelector_layout", value: "layout" }, { label: A("header.editorMode_logic"), tooltip: A("header.editorMode_logic_tooltip"), key: "editorModeSelector_logic", value: "logic" }, { label: A("header.editorMode_both"), key: "editorModeSelector_both", value: "both" }];
  ie(() => {
    (async (e2) => {
      const t2 = await N.getAppSlug(e2);
      200 === t2.status ? t2.data.data.applicationInfoView.slug && pe2(t2.data.data.applicationInfoView.slug) : pe2("");
    })(Z2);
  }, [Z2]);
  const et = de(se, { children: [ne(xe, { onClick: () => M.push($), children: ((_a = ye2 == null ? void 0 : ye2.config_set) == null ? void 0 : _a.logo) ? Boolean(ye2 == null ? void 0 : ye2.orgId) ? ne(Fe, { src: n((_b = ye2 == null ? void 0 : ye2.config_set) == null ? void 0 : _b.logo) }) : ne(Fe, { src: (_c = ye2 == null ? void 0 : ye2.config_set) == null ? void 0 : _c.logo }) : ne(_, {}) }), qe2 ? ne(Ee, { children: ne(I, { prefixIcon: Xe && ne(E, {}), disabled: he2, style: he2 ? { maxWidth: "fit-content" } : {}, text: (X2 == null ? void 0 : X2.name) ?? "", editing: We2, onFinish: (e2) => {
    e2.trim() ? (fe2(T({ applicationId: Z2, name: e2 })), Ve2(false)) : B.warning(A("header.nameCheckMessage"));
  } }) }) : ne(l, { setEdit: () => {
    Ve2(true), Ye(true);
  } }), he2 && ne(_e, { children: A("header.viewOnly") })] }), tt = de(se, { children: [ne(e.Group, { onChange: ({ target: { value: e2 } }) => {
    G2(e2), d2.setEditorModeStatus(e2);
  }, value: a2.editorModeStatus, optionType: "button", buttonStyle: "solid", size: "small", children: Ze.map((o2) => ne(t, { title: o2.tooltip, children: ne(e.Button, { value: o2.value, children: o2.label }, o2.key) }, o2.key)) }), ne(we, { children: ne(je, { onClick: () => Y2("left"), $show: O2 }) }), ne(we, { children: ne(ke, { onClick: () => Y2("bottom"), $show: J2 }) }), ne(we, { disabled: he2, children: ne(ve, { onClick: () => Y2("right"), $show: K2 }) }), he2 && de(Ce, { children: [ne(Ae, { disabled: !ge2, buttonType: "primary", onClick: () => {
    X2 && ge2 && R.confirm({ title: A("header.recoverAppSnapshotTitle"), content: A("header.recoverAppSnapshotContent", { time: ce(ge2.createTime).format("YYYY-MM-DD HH:mm") }), onConfirm: () => {
      fe2(z(X2.applicationId, ge2.snapshotId, ge2.createTime, be2));
    } });
  }, children: A("header.recoverAppSnapshotMessage") }), ne($e, { onClick: () => fe2(H(false)), children: A("header.returnEdit") })] })] }), ot = ae(() => he2 ? ne(Pe, { user: Q2 }) : de(se, { children: [s2 && Boolean(Z2) && ne(se, { children: ne(o, { style: { width: 200 }, content: () => de(r, { vertical: true, gap: 10, align: "center", style: { maxWidth: "250px" }, children: [ne(ue, { style: { textAlign: "center" }, children: A("header.AppEditingBlockedHint") }), ne(ze, { title: A("header.AppEditingBlocked"), value: Qe.current, onFinish: () => {
    Ke(true);
  } }), ne(t, { title: A("header.AppEditingBlockedMessage"), placement: "bottom", children: de(q, { style: { width: "100%" }, buttonType: "primary", disabled: s2 && !Je, onClick: () => {
    h2 == null ? void 0 : h2(), Ke(false), Qe.current = Ue();
  }, children: [ne(He, {}), ne("span", { children: A("header.AppEditingBlockedCheckStatus") })] }) })] }), trigger: "hover", children: de(Be, { children: [ne(p, { source: Q2.avatarUrl, userName: Q2.username, side: 24 }), ne(Te, { children: `${(Ne == null ? void 0 : Ne.email) || A("header.AppEditingBlockedSomeone")} ` + A("header.AppEditingBlockedMessageSnipped") }), ne(Re, {})] }) }) }), Boolean(Z2) && ne(c, { applicationId: Z2, visible: Ge, onVisibleChange: (e2) => !e2 && Le(false) }), D(Q2, X2) && ne($e, { onClick: () => Le(true), disabled: s2, children: F }), ne(Se, { buttonType: "primary", onClick: () => P(Z2), children: A("header.preview") }), ne(i, { className: "cypress-header-dropdown", placement: "bottomRight", trigger: ["click"], popupRender: () => ne(De, { style: { minWidth: "110px", borderRadius: "4px" }, onClick: (e2) => {
    s2 || ("deploy" === e2.key ? fe2(U({ applicationId: Z2, slug: ee2 })) : "snapshot" === e2.key && fe2(H(true)));
  }, items: [{ key: "deploy", label: de("div", { style: { display: "flex", alignItems: "center" }, children: [s2 && ne(le, { style: { marginRight: "8px" } }), ne(V, { style: { color: s2 ? "#ccc" : "#222" }, children: A("header.deploy") })] }), disabled: s2 }, { key: "snapshot", label: de("div", { style: { display: "flex", alignItems: "center" }, children: [s2 && ne(le, { style: { marginRight: "8px" } }), ne(V, { style: { color: s2 ? "#ccc" : "#222" }, children: A("header.snapshot") })] }), disabled: s2 }] }), children: ne(Ie, { buttonType: "primary", disabled: s2, children: ne(W, {}) }) }), ne(Pe, { user: Q2 })] }), [Q2, he2, Z2, Ge, s2, Je, Ne == null ? void 0 : Ne.name, ee2]);
  return ne(f, { headerStart: et, headerMiddle: tt, headerEnd: ot, style: { backgroundColor: (_d = ye2 == null ? void 0 : ye2.config_set) == null ? void 0 : _d.appHeaderColor } });
}
function We() {
  var _a, _b, _c;
  const e2 = u(x), t2 = u(me), o2 = ne(xe, { onClick: () => M.push($), children: ((_a = t2 == null ? void 0 : t2.config_set) == null ? void 0 : _a.logo) ? ne(Fe, { src: n((_b = t2 == null ? void 0 : t2.config_set) == null ? void 0 : _b.logo) }) : de(se, { children: [ne(be, { branding: true }), ne(qe, { children: "VNPT Composable Platform" })] }) });
  return ne(f, { headerStart: o2, headerEnd: ne(Pe, { user: e2 }), style: { backgroundColor: ((_c = t2 == null ? void 0 : t2.config_set) == null ? void 0 : _c.appHeaderColor) || "#0066b3" } });
}
export {
  We as AppHeader,
  Ve as default
};
