import { am as ce, hS as B, hj as c, h$ as z, i0 as pe, i1 as he, hi as fe, i2 as ge, i3 as ue, i4 as me, i5 as xe, i6 as be, a4 as i, ad as d, I as y, H as e, i7 as A, i8 as O, i9 as W, ia as ye, ib as we, cT as ke, ic as Se, id as L, az as _, cW as ve, cj as N, ie as Ce, ig as H, ih as Ae, cY as Ee, ii as g, ij as Me, ik as $e, il as Ie, ao as j, im as Re, io as D, ip as F, hr as V, iq as Te, a3 as t, aC as Be, ir as Le, cX as _e, is as He, it as De, iu as Fe, iv as Pe, iw as Ue, ix as ze, iy as Oe, iz as We, iA as Ne, iB as je, iC as Ve } from "./56c67d3b.js";
import { H as Ye, P as Ge, A as qe, a as Y, b as Xe } from "./3326e676.js";
import { useContext as S, useState as x, useRef as Je, useEffect as Ke, useMemo as Qe } from "react";
import "react-dom";
import "./0d7df38d.js";
import "./0a391aff.js";
const {
  Countdown: Ze
} = Ve, {
  Text: et
} = Te, G = t.a`
  display: flex;
  align-items: center;
  margin-right: 12px;
`;
t(Fe)`
  min-width: 24px;
  max-width: 24px;
`;
const w = Be`
  &:hover {
    background-color: #8b8fa34c;
  }

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

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

  cursor: pointer;
`;
t(Pe)`
  ${w}
`;
const tt = t(Ue)`
  ${w}
`, ot = t(ze)`
  ${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;
  }
`, it = t(Oe)`
  ${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;  
  `}
`, rt = 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;
`, at = t(g)`
  padding: 4px 7px;
  height: 28px;

  &:disabled,
  &:disabled:hover {
    background: #4965f2;
    border: 1px solid #4965f2;
    color: #ffffff;
    opacity: 0.35;
  }
`, dt = 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;
    }
  }
`, st = t.span`
  font-size: 12px;
  color: #b8b9bf;
  line-height: 12px;
  margin-left: -22px;
`;
t(V)`
  transform: rotate(180deg);
  margin-left: 4px;
  min-width: 18px;

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