import { jsx as e, jsxs as i, Fragment as I } from "react/jsx-runtime";
import * as s from "react";
import { useEffect as B, useMemo as z } from "react";
import { l as k } from "./lodash.xuulwbEa.js";
import { l as P, m as D, J as W } from "./index.dWlEA7uO.js";
import { n as R } from "./index.B0wX8xO7.js";
import { l as Z } from "./index.C1ZfizMq.js";
import { a as V } from "./index.CfQlFjZU.js";
import { B as _, a as F } from "./Button.CpTwUWVr.js";
import { B as T } from "./ButtonGroup.GFy-lPs3.js";
import { a as G } from "./ProgressActivity.DYLCzf8q.js";
import { a as c } from "./Stack.XB4icBMm.js";
import { u as L, M as j } from "./modal.BZAvb1Nx.js";
import { S as K } from "./shared.EdGf6tcG.js";
import { A as O } from "./AffiliateProductCard.en584cBU.js";
import { c as Y, i as J } from "./Dropdown.CMeTYQwB.js";
import { S as $ } from "./Search.BMvpFqQc.js";
const q = (t) => /* @__PURE__ */ s.createElement("svg", { width: 128, height: 128, viewBox: "0 0 128 128", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ s.createElement("rect", { x: 56, y: 16, width: 64, height: 64, rx: 4, fill: "#E3F331" }), /* @__PURE__ */ s.createElement("path", { d: "M104 21H98.6666C98.6666 15.1067 93.8933 10.3334 88 10.3334C82.1066 10.3334 77.3333 15.1067 77.3333 21H72C69.0666 21 66.6666 23.4 66.6666 26.3334V58.3334C66.6666 61.2667 69.0666 63.6667 72 63.6667H104C106.933 63.6667 109.333 61.2667 109.333 58.3334V26.3334C109.333 23.4 106.933 21 104 21ZM88 15.6667C90.9333 15.6667 93.3333 18.0667 93.3333 21H82.6666C82.6666 18.0667 85.0666 15.6667 88 15.6667ZM104 58.3334H72V26.3334H77.3333V31.6667C77.3333 33.1334 78.5333 34.3334 80 34.3334C81.4666 34.3334 82.6666 33.1334 82.6666 31.6667V26.3334H93.3333V31.6667C93.3333 33.1334 94.5333 34.3334 96 34.3334C97.4666 34.3334 98.6666 33.1334 98.6666 31.6667V26.3334H104V58.3334Z", fill: "#323134" }), /* @__PURE__ */ s.createElement("rect", { x: 16, y: 48, width: 64, height: 64, rx: 4, fill: "#E3F331" }), /* @__PURE__ */ s.createElement("path", { d: "M32 53.3333C17.28 53.3333 5.33337 65.28 5.33337 80C5.33337 94.72 17.28 106.667 32 106.667C46.72 106.667 58.6667 94.72 58.6667 80C58.6667 65.28 46.72 53.3333 32 53.3333ZM32 101.333C20.24 101.333 10.6667 91.76 10.6667 80C10.6667 68.24 20.24 58.6666 32 58.6666C43.76 58.6666 53.3334 68.24 53.3334 80C53.3334 91.76 43.76 101.333 32 101.333ZM32.8267 77.7066C28.1067 76.5066 26.5867 75.2 26.5867 73.2533C26.5867 71.0133 28.6934 69.44 32.1867 69.44C35.8667 69.44 37.2534 71.2 37.36 73.8133H41.92C41.7867 70.24 39.6 66.96 35.28 65.8933V61.3333H29.0667V65.84C25.04 66.6933 21.8134 69.3066 21.8134 73.3333C21.8134 78.1066 25.7867 80.5066 31.5734 81.8933C36.7734 83.12 37.8134 84.96 37.8134 86.88C37.8134 88.2933 36.7734 90.5866 32.2134 90.5866C27.9467 90.5866 26.2667 88.6666 26.0267 86.2133H21.44C21.7067 90.7466 25.0667 93.3066 29.0667 94.1333V98.6666H35.3067V94.2133C39.36 93.44 42.56 91.12 42.5867 86.8266C42.56 80.96 37.52 78.9333 32.8267 77.7066Z", fill: "#323134" })), U = "creator_emptyStateWrapper_-f4Gl", X = "creator_loadingStateWrapper_MBg7F", Q = "creator_centerButtons_sCek3", e3 = "creator_card_GrYel", t3 = "creator_dropdownContainer_tzGRo", a3 = "creator_bodySmall_7kPFE", o3 = "creator_headerMedium_w2MjM", r = { emptyStateWrapper: U, loadingStateWrapper: X, centerButtons: Q, card: e3, dropdownContainer: t3, bodySmall: a3, headerMedium: o3 };
function r3({
  isLoading: t,
  products: o,
  visible: n,
  onProductAdd: l,
  onProductDetails: h,
  onClose: m,
  hasNextPage: g,
  onNextPage: S,
  hasPreviousPage: y,
  onPreviousPage: w,
  onHowItWorksClick: M,
  searchQuery: d,
  onSearchQueryChange: N,
  categories: b,
  selectedCategoryKey: x,
  onCategoryChange: p
}) {
  const { Modal: v, closeModal: C, openModal: f } = L();
  B(() => {
    n ? f() : C();
  }, [n, f, C]);
  const a = z(() => t ? "loading" : o?.length ? "filled" : "empty", [t, o]);
  function H(u) {
    const E = u[0];
    if (E) {
      const A = J(E);
      p?.(A);
    } else
      p?.("all");
  }
  return {
    products: o,
    onProductAdd: l,
    onProductDetails: h,
    state: a,
    Modal: v,
    onClose: m,
    hasNextPage: g,
    onNextPage: S,
    hasPreviousPage: y,
    onPreviousPage: w,
    onHowItWorksClick: M,
    searchQuery: d,
    onSearchQueryChange: N,
    dropdownContainerClassName: r.dropdownContainer,
    categoryDropdownItems: b.map((u) => ({
      value: u.key,
      label: u.name
    })),
    selectedCategoryKey: x,
    onCategorySelect: H,
    cardClassName: r.card,
    buttonsClassName: r.centerButtons
  };
}
function n3({
  state: t,
  products: o,
  onProductAdd: n,
  onProductDetails: l,
  Modal: h,
  onClose: m,
  hasNextPage: g,
  onNextPage: S,
  hasPreviousPage: y,
  onPreviousPage: w,
  onHowItWorksClick: M,
  searchQuery: d,
  onSearchQueryChange: N,
  cardClassName: b,
  buttonsClassName: x,
  dropdownContainerClassName: p,
  categoryDropdownItems: v,
  selectedCategoryKey: C,
  onCategorySelect: f
}) {
  return /* @__PURE__ */ e(
    h,
    {
      type: j.ADVANCED,
      heading: "Add affiliate product",
      buttons: [
        {
          label: "Cancel",
          semantic: K.SECONDARY,
          onClick: () => m()
        }
      ],
      onDismiss: () => m(),
      body: /* @__PURE__ */ i(c, { direction: "column", spacing: 1, children: [
        "Earn affiliate revenue on Komi by linking to products in our catalog.",
        /* @__PURE__ */ e(
          _,
          {
            label: "How It Works",
            size: "xsmall",
            prefixIcon: /* @__PURE__ */ e(W, { size: 24 }),
            onClick: () => M()
          }
        )
      ] }),
      children: /* @__PURE__ */ i(c, { direction: "column", spacing: 2, children: [
        /* @__PURE__ */ e(
          $,
          {
            label: "Search",
            placeholder: "Search for brands and products",
            keyword: d,
            onChange: (a) => N?.(a.target.value)
          }
        ),
        /* @__PURE__ */ e("div", { className: p, children: /* @__PURE__ */ e(
          Y,
          {
            label: "Category",
            placeholder: "Select an option",
            items: v,
            value: C,
            onSelect: f,
            onClick: k.noop,
            onChange: k.noop
          }
        ) }),
        /* @__PURE__ */ e(
          R,
          {
            value: t,
            then: {
              filled: /* @__PURE__ */ i(I, { children: [
                /* @__PURE__ */ e(c, { direction: "row", spacing: 2, wrap: "wrap", children: /* @__PURE__ */ e(
                  Z,
                  {
                    values: o,
                    layout: (a) => /* @__PURE__ */ e(
                      O,
                      {
                        name: a.name,
                        image: a.image,
                        price: a.price,
                        commissionRate: a.commissionRate,
                        commissionType: a.commissionType,
                        onAddProduct: () => {
                          n?.(a.id);
                        },
                        onSeeDetails: () => {
                          l?.(a.id);
                        },
                        className: b
                      },
                      a.id
                    )
                  }
                ) }),
                /* @__PURE__ */ e(
                  T,
                  {
                    className: x,
                    buttons: [
                      {
                        label: "Previous",
                        size: "xsmall",
                        prefixIcon: /* @__PURE__ */ e(P, { size: 24 }),
                        disabled: !y,
                        onClick: () => w?.()
                      },
                      {
                        label: "Next",
                        suffixIcon: /* @__PURE__ */ e(D, { size: 24 }),
                        size: "xsmall",
                        disabled: !g,
                        onClick: () => S?.()
                      }
                    ]
                  }
                )
              ] }),
              empty: /* @__PURE__ */ e(d3, { searchQuery: d }),
              loading: /* @__PURE__ */ e(s3, {})
            }
          }
        )
      ] })
    }
  );
}
function i3() {
  return {
    wrapperClassName: r.loadingStateWrapper
  };
}
function l3({ wrapperClassName: t }) {
  return /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ e(G, {}) });
}
const s3 = V(l3, i3);
function c3({ searchQuery: t }) {
  return {
    searchQuery: t,
    wrapperClassName: r.emptyStateWrapper,
    headerMediumClassName: r.headerMedium,
    bodySmallClassName: r.bodySmall
  };
}
function m3({
  searchQuery: t,
  wrapperClassName: o,
  headerMediumClassName: n,
  bodySmallClassName: l
}) {
  return /* @__PURE__ */ e("div", { className: o, children: /* @__PURE__ */ i(c, { direction: "column", spacing: 3, alignItems: "center", children: [
    /* @__PURE__ */ e(q, {}),
    /* @__PURE__ */ i(c, { direction: "column", spacing: 0.5, alignItems: "center", children: [
      /* @__PURE__ */ i("p", { className: n, children: [
        "No results",
        t?.length ? ` matching '${t}'` : ""
      ] }),
      /* @__PURE__ */ e("p", { className: l, children: "Not finding your favorite product?" }),
      /* @__PURE__ */ e(
        _,
        {
          type: F.LINK,
          size: "xsmall",
          label: "Contact us",
          href: "mailto:support@komi.io",
          style: { marginTop: -1 }
        }
      )
    ] })
  ] }) });
}
const d3 = V(m3, c3), k3 = V(
  n3,
  r3
);
export {
  n3 as A,
  k3 as a
};
