import t, { useEffect as u } from "react";
import { ButtonRounding as f, ButtonSize as b, ButtonStyle as g, ButtonEmphasis as C, ButtonType as S } from "../../node_modules/@frontify/fondue/dist/components/Button/ButtonTypes.es.es.js";
import { Button as h } from "../../node_modules/@frontify/fondue/dist/components/Button/Button.es.es.js";
import { Divider as w } from "../../node_modules/@frontify/fondue/dist/components/Divider/Divider.es.es.js";
import { LoadingBar as x, LoadingBarSize as U } from "../../node_modules/@frontify/fondue/dist/components/LoadingBar/LoadingBar.es.es.js";
import { Icon as $ } from "../../node_modules/@frontify/fondue/dist/foundation/Icon/Icon.es.es.js";
import { IconEnum as j } from "../../node_modules/@frontify/fondue/dist/foundation/Icon/IconEnum.es.es.js";
import { IconSize as J } from "../../node_modules/@frontify/fondue/dist/foundation/Icon/IconSize.es.es.js";
import { Stack as O } from "../../node_modules/@frontify/fondue/dist/layout/Stack/Stack.es.es.js";
import { Text as m } from "../../node_modules/@frontify/fondue/dist/typography/Text/Text.es.es.js";
import N from "../../node_modules/zustand/esm/shallow.es.js";
import { BrandDropdown as F } from "../BrandDropdown/BrandDropdown.es.js";
import { MenuEntries as _ } from "../MenuEntries/MenuEntries.es.js";
import { TreeNavigation as G } from "../TreeNavigation/TreeNavigation.es.js";
import { ImageGallery as R } from "../ImageGallery/ImageGallery.es.js";
import { useUploaderStore as W } from "../../state/uploaderStore.es.js";
import { Frontify as q } from "../../service/Frontify.es.js";
import "./DestinationDashboard.es2.js";
import "../../model/Brand/LibraryIconMap.es.js";
import { getAllParentNames as H } from "../../service/Tree/lib/getAllParentNames.es.js";
import { useAssetUploadStore as K } from "../../state/assetUploadStore.es.js";
import { ImageSize as Q } from "../Image/Image.es.js";
const Se = ({ onCancel: I, onUpload: y }) => {
  const {
    token: B,
    setSelectedBrandId: v,
    selectedBrandId: i,
    tree: n,
    setInitialTree: z,
    selectedNode: d,
    setSelectedNode: L,
    selectedLibraryId: o,
    setSelectedLibraryId: c,
    brands: l,
    setBrands: k
  } = W(
    (e) => ({
      token: e.token,
      setSelectedBrandId: e.setSelectedBrandId,
      selectedBrandId: e.selectedBrandId,
      tree: e.tree,
      setInitialTree: e.setInitialTree,
      selectedNode: e.selectedNode,
      setSelectedNode: e.setSelectedNode,
      selectedLibraryId: e.selectedLibraryId,
      setSelectedLibraryId: e.setSelectedLibraryId,
      brands: e.brands,
      setBrands: e.setBrands
    }),
    N
  ), { assets: s, setAssets: D, progress: A, setProgress: M, onError: T } = K(
    (e) => ({
      setAssets: e.setAssets,
      assets: e.assets,
      progress: e.progress,
      setProgress: e.setProgress,
      onError: e.onError
    }),
    N
  ), p = () => {
    var e, a;
    return (a = (e = l.find((r) => r.id === i)) == null ? void 0 : e.libraries.items.map((r) => ({
      ...r,
      active: r.id === o
    }))) != null ? a : [];
  }, E = () => {
    var e, a;
    return (a = (e = l.find((r) => r.id === i)) == null ? void 0 : e.workspaceProjects.items.map((r) => ({
      ...r,
      active: r.id === o
    }))) != null ? a : [];
  };
  return u(() => k(), []), u(() => {
    z();
  }, [o]), /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard"
  }, /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__section"
  }, /* @__PURE__ */ t.createElement("div", {
    className: "tw-dark destination-dashboard__start-pane"
  }, /* @__PURE__ */ t.createElement(O, {
    direction: "column",
    padding: "l",
    spacing: "xs"
  }, /* @__PURE__ */ t.createElement(F, {
    brands: l,
    onSelection: (e) => v(e),
    initialActiveId: i
  }), /* @__PURE__ */ t.createElement(w, {
    color: "rgb(26, 28, 28)"
  }), /* @__PURE__ */ t.createElement("section", {
    className: "destination-dashboard__menu-list"
  }, p().length > 0 && /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__title"
  }, /* @__PURE__ */ t.createElement(m, {
    as: "p",
    size: "small"
  }, "Libraries")), /* @__PURE__ */ t.createElement(_, {
    entries: p(),
    onEntrySelected: (e) => {
      c(e);
    }
  })), E().length > 0 && /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__title"
  }, /* @__PURE__ */ t.createElement(m, {
    as: "p",
    size: "small"
  }, "Projects")), /* @__PURE__ */ t.createElement(_, {
    entries: E(),
    onEntrySelected: (e) => {
      c(e);
    }
  }))))), /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__end-pane"
  }, /* @__PURE__ */ t.createElement(R, {
    asset: s,
    size: Q.small,
    onAssetsChosen: (e) => s && D(
      e.reduce(
        (a, r) => a.filter((P) => JSON.stringify(P) !== JSON.stringify(r)),
        s
      )
    ),
    actionLabel: "Delete"
  }), /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__tree"
  }, !!n && /* @__PURE__ */ t.createElement(G, {
    initialLibrary: n,
    onNodeSelection: L
  })), /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__progress-bar"
  }, /* @__PURE__ */ t.createElement(x, {
    percentage: A,
    size: U.Medium
  })), /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__footer"
  }, /* @__PURE__ */ t.createElement("div", {
    className: "destination-dashboard__upload-text"
  }, /* @__PURE__ */ t.createElement(m, {
    as: "p",
    size: "small"
  }, /* @__PURE__ */ t.createElement("b", null, s && s.length, " Asset", s && s.length > 1 ? "s" : ""), " ", "to upload")), /* @__PURE__ */ t.createElement(h, {
    onClick: I,
    rounding: f.Medium,
    size: b.Medium,
    style: g.Default,
    emphasis: C.Default,
    type: S.Button
  }, "Cancel"), /* @__PURE__ */ t.createElement(h, {
    onClick: () => {
      d && o && q.uploadToLibrary(
        H(d, n),
        s != null ? s : [],
        o,
        y,
        M,
        T,
        B
      );
    },
    icon: /* @__PURE__ */ t.createElement($, {
      icon: j.CheckMark16,
      size: J.Size24
    }),
    disabled: !d,
    rounding: f.Medium,
    size: b.Medium,
    style: g.Default,
    type: S.Button
  }, "Upload")))));
};
export {
  Se as DestinationDashboard
};
//# sourceMappingURL=DestinationDashboard.es.js.map
