import { jsxs as x, Fragment as ee, jsx as t } from "react/jsx-runtime";
import { l as te } from "./index.C1ZfizMq.js";
import { a as oe } from "./index.CfQlFjZU.js";
import { n as g } from "./index.B0wX8xO7.js";
import { useState as C, useCallback as o, useMemo as ne } from "react";
import { S as G } from "./shared.EdGf6tcG.js";
import { c as ie } from "./Dropdown.CMeTYQwB.js";
import { R as le } from "./RadioGroup.BSNFAoNq.js";
import { S as se } from "./Stepper.BxuuZHhu.js";
import { L as ae } from "./LoadingState.BcrOPPws.js";
import { c as re, A as ce } from "./Avatar.Chk9viGr.js";
import { u as de } from "./useIntersectionObserver.D3K20jCX.js";
import { C as T } from "./card.CVCKhKP6.js";
import { a as me, g as z, d as P } from "./GridRow._ehOXG8R.js";
import { u as ue } from "./shortVideoModule.BlUq1dqv.js";
import { u as fe } from "./ItemCreationContext.CFI6PyWk.js";
const he = "creator_videoCard_cu7so", pe = "creator_videoList_eqa89", ge = "creator_thumbnail_awm0r", Ce = "creator_videoTitle_Eirg8", Se = "creator_loadingCol_m9Izv", S = { videoCard: he, videoList: pe, thumbnail: ge, videoTitle: Ce, loadingCol: Se };
function be(n, d) {
  if (!n || n.length === 0)
    return null;
  const i = n.find((m) => m.id === d);
  return d && i ? i : n[0];
}
const ve = ({
  previousPageUrl: n,
  type: d,
  submitting: i = !1,
  loading: m = !1,
  accounts: l,
  videos: u,
  selectionMode: b,
  selectedAccountId: v,
  defaultCount: I = 4,
  onAddLatestVideos: V,
  onCustomSelection: h,
  onAccountChanged: A,
  onCancel: k,
  onLoadMore: w
}) => {
  const [f, N] = C(!1), [$, O] = C(
    be(l, v)
  ), [s, j] = C(
    b || "latest"
  ), [p, M] = C([]), [L, R] = C(I), _ = ue(d), F = o(() => {
    w?.();
  }, [w]), { ref: W } = de(F, 0.8), Y = o(
    (e) => {
      if (e.length === 0 || !l) return;
      const r = typeof e[0] == "string" ? e[0] : e[0].value, c = l.find((a) => a.id === r);
      c && (A(c), O(c));
    },
    [l, A]
  ), q = o((e) => {
    j(e), e === "latest" && (M([]), R(4));
  }, []), y = o((e) => {
    M((r) => r.some((a) => a.id === e.id) ? r.filter((a) => a.id !== e.id) : [...r, e]);
  }, []), B = o(() => {
    s === "latest" ? V(L) : h(p);
  }, [
    s,
    p,
    V,
    h,
    L
  ]), D = o(() => {
    N(!0);
  }, []), K = o(() => {
    N(!1);
  }, []), U = o(() => {
    N(!1), k();
  }, [k]), H = o((e) => {
    R(e);
  }, []), J = ne(() => s === "latest" ? u.length > 0 : p.length > 0, [s, u, p]), Q = (e, r) => {
    const c = /* @__PURE__ */ x("div", { style: { position: "relative", width: "100%" }, children: [
      /* @__PURE__ */ t(
        "img",
        {
          src: e.thumbnail,
          alt: e.title,
          className: S.thumbnail,
          draggable: !1,
          ref: r === u.length - 1 ? W : null
        }
      ),
      /* @__PURE__ */ t("p", { className: S.videoTitle, children: e.title })
    ] });
    let a = /* @__PURE__ */ t(
      T,
      {
        elevation: "medium",
        interaction: s === "custom" ? "interactive" : "static",
        disabled: m,
        onClick: () => s === "custom" && y(e),
        children: c
      },
      e.id
    );
    const E = p.some((Z) => Z.id === e.id);
    return s === "custom" && E && (a = /* @__PURE__ */ t(
      T,
      {
        elevation: "high",
        interaction: "selectable",
        selected: E,
        onClick: () => y(e),
        children: c
      },
      e.id
    )), /* @__PURE__ */ t(P, { className: S.videoCard, children: a });
  }, X = [
    {
      label: "Previous",
      semantic: G.SECONDARY,
      onClick: D,
      disabled: i
    },
    {
      label: "Done",
      semantic: G.PRIMARY,
      onClick: B,
      disabled: !J || i,
      loading: i
    }
  ];
  return fe({
    previousPageUrl: n,
    buttons: X,
    title: `Add ${_.platformName} ${_.plural}`,
    showWarningModal: f,
    onKeepEditing: K,
    onGoBack: U,
    onClickPrevious: D
  }), {
    accountLabel: `${_.platformName} profile`,
    latestVideosLabel: `Latest ${_.plural}`,
    accounts: l || [],
    hideAccounts: !l,
    selectedAccount: $,
    onAccountChange: Y,
    hideSelectionMode: b !== void 0,
    selectionMode: s,
    onSelectionModeChange: q,
    loading: m,
    videos: u,
    renderVideo: Q,
    latestVideosCount: L,
    onCountChanged: H
  };
}, Ve = ({
  accountLabel: n,
  latestVideosLabel: d,
  accounts: i,
  selectedAccount: m,
  hideAccounts: l,
  onAccountChange: u,
  hideSelectionMode: b,
  selectionMode: v,
  onSelectionModeChange: I,
  loading: V,
  videos: h,
  renderVideo: A,
  latestVideosCount: k,
  onCountChanged: w
}) => /* @__PURE__ */ x(ee, { children: [
  /* @__PURE__ */ t(
    g,
    {
      value: !l,
      then: /* @__PURE__ */ t(
        ie,
        {
          label: n,
          placeholder: "Select a profile",
          items: i.map((f) => ({
            value: f.id,
            label: f.username,
            prefixIcon: /* @__PURE__ */ t(
              re,
              {
                url: f.avatarUrl,
                username: f.username,
                size: ce.SM
              }
            )
          })),
          value: m?.id,
          helper: "Connect more accounts in Settings > Integrations",
          onClick: () => {
          },
          onSelect: u,
          onChange: () => {
          },
          showIconsInField: !0
        }
      )
    }
  ),
  /* @__PURE__ */ t(
    g,
    {
      value: !b,
      then: /* @__PURE__ */ t(
        le,
        {
          label: "Add from",
          name: "selection-mode",
          options: [
            { value: "latest", label: d },
            { value: "custom", label: "Custom selection" }
          ],
          selected: v,
          onSelected: I
        }
      )
    }
  ),
  /* @__PURE__ */ t(
    g,
    {
      value: v === "latest",
      then: /* @__PURE__ */ t(
        se,
        {
          label: "Number of videos",
          value: k,
          min: 1,
          max: 10,
          onChange: w
        }
      )
    }
  ),
  /* @__PURE__ */ x(me, { className: S.videoList, children: [
    /* @__PURE__ */ t(
      g,
      {
        value: h.length > 0,
        then: /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(te, { values: h, layout: A }) })
      }
    ),
    /* @__PURE__ */ t(
      g,
      {
        value: V,
        then: /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(P, { className: S.loadingCol, children: /* @__PURE__ */ t(ae, { type: "wheel", size: "small" }) }) })
      }
    )
  ] })
] }), Pe = oe(
  Ve,
  ve
);
export {
  Pe as S
};
