import { defineComponent as T, ref as l, computed as a, onMounted as V, onUnmounted as A, createElementBlock as B, openBlock as _, Fragment as $, createElementVNode as t, normalizeStyle as f, unref as o, createVNode as R, toDisplayString as C, withCtx as g, createTextVNode as z } from "vue";
import { ScalarButton as E } from "@scalar/components";
import { useToasts as j } from "@scalar/use-toasts";
import { useThreeWayMergeEditor as L } from "../../editor/hooks/use-three-way-merge-editor.js";
import { useSplitResize as U } from "../../../components/resize/use-split-resize.js";
const F = { class: "sync-editor-pane border-c-3 mx-1 mb-1 flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border" }, H = { class: "sync-pane-title text-c-2 border-c-3 flex shrink-0 items-center justify-between border-b px-2 py-1 text-[11px]" }, W = { class: "flex items-center gap-2" }, q = { class: "text-c-2 text-[11px] normal-case" }, G = { class: "flex shrink-0 items-center justify-end gap-2" }, X = /* @__PURE__ */ T({
  __name: "SyncConflictResolutionEditor",
  props: {
    conflicts: {},
    baseDocument: {},
    resolvedDocument: {}
  },
  emits: ["applyChanges"],
  setup(d, { emit: k }) {
    const w = k, { toast: S } = j(), u = l(), p = l(), m = l(50), c = l(50), { onHorizontalResizeStart: x, onVerticalResizeStart: v, stopActiveResize: D } = U({
      horizontalContainerRef: p,
      verticalContainerRef: u,
      leftPaneSize: c,
      topPaneSize: m,
      horizontalMin: 20,
      horizontalMax: 80,
      verticalMin: 25,
      verticalMax: 75
    }), i = L({
      baseDocument: d.baseDocument,
      resolvedDocument: d.resolvedDocument,
      conflicts: d.conflicts,
      onApplyChanges: (n) => w("applyChanges", { resolvedDocument: n }),
      onError: (n) => S(n, "error")
    }), r = a(() => i.conflictsLeft.value), P = a(() => ({ height: `${m.value}%` })), M = a(() => ({ width: `${c.value}%` })), N = a(() => ({
      width: `${100 - c.value}%`
    })), y = l(), b = l(), h = l();
    return V(() => {
      const n = y.value, e = b.value, s = h.value;
      n && e && s && i.init({
        local: n,
        remote: e,
        result: s
      });
    }), A(() => {
      D(), i.dispose();
    }), (n, e) => (_(), B($, null, [
      e[7] || (e[7] = t("p", { class: "text-c-2 text-xs" }, " Resolve conflicts inline in the full document editor. Use the buttons inside the editor for each conflict. ", -1)),
      t("div", {
        ref_key: "splitContainerRef",
        ref: u,
        class: "flex min-h-0 flex-1 flex-col overflow-hidden"
      }, [
        t("div", {
          ref_key: "topEditorsRowRef",
          ref: p,
          class: "flex min-h-0 gap-1 p-1",
          style: f(P.value)
        }, [
          t("div", {
            class: "sync-editor-pane border-c-3 flex min-h-0 flex-col overflow-hidden rounded-lg border",
            style: f(M.value)
          }, [
            e[2] || (e[2] = t("div", { class: "sync-pane-title text-c-2 border-c-3 shrink-0 border-b px-2 py-1 text-[11px]" }, " Current ", -1)),
            t("div", {
              ref_key: "localChangesEditorRef",
              ref: y,
              class: "min-h-0 flex-1"
            }, null, 512)
          ], 4),
          t("button", {
            "aria-label": "Resize current and remote editors",
            class: "resize-handle resize-handle-col",
            type: "button",
            onPointerdown: e[0] || (e[0] = //@ts-ignore
            (...s) => o(x) && o(x)(...s))
          }, null, 32),
          t("div", {
            class: "sync-editor-pane border-c-3 flex min-h-0 flex-col overflow-hidden rounded-lg border",
            style: f(N.value)
          }, [
            e[3] || (e[3] = t("div", { class: "sync-pane-title text-c-2 border-c-3 shrink-0 border-b px-2 py-1 text-[11px]" }, " Remote ", -1)),
            t("div", {
              ref_key: "remoteChangesEditorRef",
              ref: b,
              class: "min-h-0 flex-1"
            }, null, 512)
          ], 4)
        ], 4),
        t("button", {
          "aria-label": "Resize top and result editors",
          class: "resize-handle resize-handle-row",
          type: "button",
          onPointerdown: e[1] || (e[1] = //@ts-ignore
          (...s) => o(v) && o(v)(...s))
        }, null, 32),
        t("div", F, [
          t("div", H, [
            e[5] || (e[5] = t("span", null, " Result ", -1)),
            t("div", W, [
              t("span", q, C(r.value) + " conflict" + C(r.value === 1 ? "" : "s") + " left ", 1),
              R(o(E), {
                disabled: r.value === 0,
                size: "xs",
                type: "button",
                variant: "outlined",
                onClick: o(i).goToNextConflict
              }, {
                default: g(() => [...e[4] || (e[4] = [
                  z(" Next Conflict ", -1)
                ])]),
                _: 1
              }, 8, ["disabled", "onClick"])
            ])
          ]),
          t("div", {
            ref_key: "resultEditorRef",
            ref: h,
            class: "min-h-0 flex-1"
          }, null, 512)
        ]),
        t("div", G, [
          R(o(E), {
            disabled: r.value > 0,
            size: "xs",
            type: "button",
            onClick: o(i).applyResolvedConflicts
          }, {
            default: g(() => [...e[6] || (e[6] = [
              z(" Apply changes ", -1)
            ])]),
            _: 1
          }, 8, ["disabled", "onClick"])
        ])
      ], 512)
    ], 64));
  }
});
export {
  X as default
};
