import { defineComponent as E, computed as z, ref as X, watch as D, openBlock as o, createElementBlock as n, normalizeStyle as F, unref as t, normalizeClass as v, Fragment as u, createVNode as r, createElementVNode as V, withKeys as L, toDisplayString as Q, createBlock as m, createCommentVNode as d, renderList as P } from "vue";
import { useTheme as T } from "../../composables/useTheme.js";
import { useCommon as C } from "../../composables/useCommon.js";
import { prevIcon as U, nextIcon as j, dotsIcon as y } from "../../common/icons.js";
import b from "../icon/Icon.vue.js";
import A from "../input/Input.vue.js";
import I from "../button/Button.vue.js";
import f from "./PaginationItem.vue.js";
const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ V("span", { class: "text-secondary-600 mr-2" }, "Page", -1), J = { class: "text-secondary-600 ml-2" }, M = ["onClick"], O = ["simple", "quick", "dots"], R = {
  ...C.props(),
  links: Boolean,
  totalPages: {
    type: Number,
    default: 1
  },
  modelValue: {
    type: Number,
    default: 1
  },
  variant: {
    type: String,
    default: "simple"
  }
}, W = {
  name: "XPagination",
  validators: {
    ...C.validators(),
    variant: O
  }
}, se = /* @__PURE__ */ E({
  ...W,
  props: R,
  emits: ["update:modelValue"],
  setup($, { emit: w }) {
    const l = $, p = w, B = z(() => l.totalPages === 3 ? [2] : l.totalPages > 2 ? l.modelValue === 1 || l.modelValue === 2 ? [2, 3] : l.modelValue === l.totalPages || l.modelValue === l.totalPages - 1 ? [l.totalPages - 2, l.totalPages - 1] : [l.modelValue - 1, l.modelValue, l.modelValue + 1] : []), i = X(l.modelValue + "");
    function N() {
      const e = parseInt(i.value);
      e >= 0 && e <= l.totalPages ? p("update:modelValue", e) : i.value = l.modelValue + "";
    }
    D(() => l.modelValue, (e) => {
      i.value = l.modelValue + "";
    });
    function q() {
      l.modelValue > 1 && p("update:modelValue", l.modelValue - 1);
    }
    function S() {
      l.modelValue < l.totalPages && p("update:modelValue", l.modelValue + 1);
    }
    const g = z(() => l.size === "xs" ? "xs" : l.size === "sm" ? "sm" : l.size === "lg" ? "md" : l.size === "xl" ? "lg" : "sm"), { styles: K, classes: c, className: h } = T("Pagination", {}, l);
    return (e, s) => (o(), n("ul", {
      style: F(t(K)),
      class: v([
        t(h),
        t(c).wrapper
      ])
    }, [
      e.variant === "quick" ? (o(), n(u, { key: 0 }, [
        r(I, {
          "icon-left": t(U),
          size: g.value,
          disabled: e.modelValue <= 1,
          onClick: q
        }, null, 8, ["icon-left", "size", "disabled"]),
        V("div", G, [
          H,
          r(A, {
            modelValue: i.value,
            "onUpdate:modelValue": s[0] || (s[0] = (a) => i.value = a),
            size: e.size,
            class: "text-center w-16",
            "hide-footer": "",
            onKeydown: L(N, ["enter"])
          }, null, 8, ["modelValue", "size", "onKeydown"]),
          V("span", J, "of " + Q(e.totalPages), 1)
        ]),
        r(I, {
          "icon-left": t(j),
          size: g.value,
          disabled: e.modelValue >= e.totalPages,
          onClick: S
        }, null, 8, ["icon-left", "size", "disabled"])
      ], 64)) : e.variant === "simple" ? (o(), n(u, { key: 1 }, [
        r(f, {
          value: 1,
          links: e.links,
          size: e.size,
          selected: e.modelValue === 1,
          onInput: s[1] || (s[1] = (a) => e.$emit("update:modelValue", a))
        }, null, 8, ["links", "size", "selected"]),
        e.totalPages > 3 && e.modelValue > 3 ? (o(), m(b, {
          key: 0,
          class: "mx-1",
          icon: t(y),
          size: e.size
        }, null, 8, ["icon", "size"])) : d("", !0),
        (o(!0), n(u, null, P(B.value, (a) => (o(), m(f, {
          key: a,
          value: a,
          links: e.links,
          size: e.size,
          selected: e.modelValue === a,
          onInput: s[2] || (s[2] = (k) => e.$emit("update:modelValue", k))
        }, null, 8, ["value", "links", "size", "selected"]))), 128)),
        e.totalPages > 3 && e.modelValue < e.totalPages - 2 ? (o(), m(b, {
          key: 1,
          class: "mx-1",
          icon: t(y),
          size: e.size
        }, null, 8, ["icon", "size"])) : d("", !0),
        e.totalPages > 1 ? (o(), m(f, {
          key: 2,
          value: e.totalPages,
          links: e.links,
          size: e.size,
          selected: e.modelValue === e.totalPages,
          onInput: s[3] || (s[3] = (a) => e.$emit("update:modelValue", a))
        }, null, 8, ["value", "links", "size", "selected"])) : d("", !0)
      ], 64)) : e.variant === "dots" ? (o(!0), n(u, { key: 2 }, P(e.totalPages, (a) => (o(), n("li", {
        key: a,
        class: v(["rounded-full cursor-pointer", [
          t(c).dots,
          a === e.modelValue ? "bg-[color:var(--x-pagination-bg)]" : "bg-secondary-100 hover:bg-secondary-200"
        ]]),
        onClick: (k) => e.$emit("update:modelValue", a)
      }, null, 10, M))), 128)) : d("", !0)
    ], 6));
  }
});
export {
  se as default
};
