"use strict";
Object.defineProperty(exports, "__esModule", { value: !0 });
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), InfiniteScroll = require("react-infinite-scroll-component"), PhotoAlbum = require("react-photo-album"), rxjs = require("rxjs"), operators = require("rxjs/operators"), styledComponents = require("styled-components");
function _interopDefaultCompat(e) {
  return e && typeof e == "object" && "default" in e ? e : { default: e };
}
var React__default = /* @__PURE__ */ _interopDefaultCompat(React), InfiniteScroll__default = /* @__PURE__ */ _interopDefaultCompat(InfiniteScroll), PhotoAlbum__default = /* @__PURE__ */ _interopDefaultCompat(PhotoAlbum);
function UnsplashIcon() {
  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { role: "img", viewBox: "0 0 25 25", width: "1em", height: "1em", fill: "currentColor", children: [
    /* @__PURE__ */ jsxRuntime.jsx("title", {}),
    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9V4h7v5H9Zm7 3h5v9H4v-9h5v5h7v-5Z" })
  ] });
}
const fetchSearch = (client, query, page, perPage) => rxjs.defer(
  () => client.observable.request({
    url: `/addons/unsplash/search/photos?query=${encodeURIComponent(
      query
    )}&page=${page}&per_page=${perPage}`,
    withCredentials: !0,
    method: "GET"
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  })
), fetchList = (client, type, page, perPage) => rxjs.defer(
  () => client.observable.request({
    url: `/addons/unsplash/photos?order_by=${type}&page=${page}&per_page=${perPage}`,
    withCredentials: !0,
    method: "GET"
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  })
);
function fetchDownloadUrl(client, photo) {
  const downloadUrl = photo.links.download_location.replace(
    "https://api.unsplash.com",
    "/addons/unsplash"
  );
  return client.request({
    url: downloadUrl,
    withCredentials: !0,
    method: "GET"
  }).then((result) => result.url);
}
const search = (client, query, page, resultsPerPage) => rxjs.concat(
  query.pipe(
    operators.withLatestFrom(page),
    operators.debounceTime(500),
    operators.distinctUntilChanged(),
    operators.switchMap(([q, p]) => q ? fetchSearch(client, q, p, resultsPerPage).pipe(
      operators.distinctUntilChanged(),
      operators.map((result) => result.results)
    ) : fetchList(client, "popular", p, resultsPerPage))
  )
), Root = styledComponents.styled.div`
  overflow: hidden;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
  position: relative;
  outline: none !important;
  border: ${({ theme }) => `1px solid ${theme.sanity.color.card.enabled.border}`};
  box-sizing: content-box;
  user-drag: none;

  &:hover {
    opacity: 0.85;
  }

  &:focus,
  &:active {
    border: 1px solid var(--input-border-color-focus);
    box-shadow: inset 0 0 0 3px var(--input-border-color-focus);
  }
`, CreditLineLink = styledComponents.styled.a`
  text-decoration: none;
  cursor: pointer;
`, CreditLine = styledComponents.styled(ui.Card)`
  ${({ theme }) => `
     --creditline-fg: ${theme.sanity.color.card.enabled.fg};
     --creditline-bg: ${theme.sanity.color.card.enabled.bg};
   `};
  user-drag: none;
  position: absolute;
  background-color: var(--creditline-bg);
  bottom: 0;

  [data-ui='Text'] {
    color: var(--creditline-fg);
  }
`, UTM_SOURCE = "sanity-plugin-asset-source-unsplash";
function Photo(props) {
  const { onClick, data, onKeyDown, onFocus, active, width, height } = props, handleClick = React.useCallback(() => {
    onClick(data);
  }, [onClick, data]), handleCreditLineClicked = React.useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (event) => {
      event.stopPropagation();
      const url = `${data.links.html}?utm_source=${encodeURIComponent(
        UTM_SOURCE
      )}&utm_medium=referral`;
      window.open(url, data.id, "noreferrer,noopener");
    },
    [data]
  ), handleKeyDown = React.useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (event) => {
      onKeyDown(event), event.keyCode === 13 && onClick(data);
    },
    [onKeyDown, data, onClick]
  ), handleMouseDown = React.useCallback(() => {
    onFocus(data);
  }, [onFocus, data]);
  React.useEffect(() => {
    active && onFocus(data);
  }, [active, data, onFocus]);
  const src = data.urls.small, userName = data.user.name;
  return /* @__PURE__ */ jsxRuntime.jsx(
    Root,
    {
      title: `Select image by ${userName} from Unsplash`,
      tabIndex: 0,
      onKeyDown: handleKeyDown,
      onMouseDown: handleMouseDown,
      style: {
        width: `${width}px`,
        height: `${height}px`,
        backgroundImage: `url("${src}")`
      },
      onClick: handleClick,
      children: /* @__PURE__ */ jsxRuntime.jsx(CreditLineLink, { onClick: handleCreditLineClicked, children: /* @__PURE__ */ jsxRuntime.jsx(CreditLine, { padding: 2, radius: 2, margin: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, title: `Open image by ${userName} on Unsplash in new window`, children: [
        "By @",
        data.user.username
      ] }) }) })
    }
  );
}
const SearchInput = styledComponents.styled(ui.TextInput)`
  position: sticky;
  top: 0;
  z-index: 1;
`;
styledComponents.styled.div`
  overflow-y: auto;
  max-height: 80vh;
`;
var __defProp = Object.defineProperty, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __publicField = (obj, key, value) => (__defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value), value);
const RESULTS_PER_PAGE = 42, PHOTO_SPACING = 2, PHOTO_PADDING = 1;
function UnsplashAssetSource(props) {
  const client = sanity.useClient({ apiVersion: "2022-09-01" });
  return /* @__PURE__ */ jsxRuntime.jsx(UnsplashAssetSourceInternal, { ...props, client });
}
class UnsplashAssetSourceInternal extends React__default.default.Component {
  constructor() {
    super(...arguments), __publicField(this, "state", {
      cursor: 0,
      query: "",
      page: 1,
      searchResults: [[]],
      isLoading: !0
    }), __publicField(this, "searchSubscription", null), __publicField(this, "searchSubject$", new rxjs.BehaviorSubject("")), __publicField(this, "pageSubject$", new rxjs.BehaviorSubject(1)), __publicField(this, "handleSelect", (photo) => (this.setState({ isLoading: !0 }), fetchDownloadUrl(this.props.client, photo).then((downloadUrl) => {
      const description = photo.description || void 0, asset = {
        kind: "url",
        value: downloadUrl,
        assetDocumentProps: {
          _type: "sanity.imageAsset",
          source: {
            name: "unsplash",
            id: photo.id,
            url: photo.links.html
          },
          description,
          creditLine: `${photo.user.name} by Unsplash`
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
        }
      };
      this.props.onSelect([asset]);
    }))), __publicField(this, "handleClose", () => {
      this.props.onClose();
    }), __publicField(this, "handleSearchTermChanged", (event) => {
      const query = event.currentTarget.value;
      this.setState({ query, page: 1, searchResults: [[]], isLoading: !0, cursor: 0 }), this.pageSubject$.next(1), this.searchSubject$.next(query);
    }), __publicField(this, "handleSearchTermCleared", () => {
      this.setState({ query: "", page: 1, searchResults: [[]], isLoading: !0, cursor: 0 }), this.pageSubject$.next(1), this.searchSubject$.next("");
    }), __publicField(this, "handleScollerLoadMore", () => {
      const nextPage = this.state.page + 1;
      this.setState({ page: nextPage, isLoading: !0 }), this.pageSubject$.next(nextPage), this.searchSubject$.next(this.state.query);
    }), __publicField(this, "handleKeyDown", (event) => {
      const { cursor } = this.state;
      (event.keyCode === 38 || event.keyCode === 37) && cursor > 0 ? this.setState((prevState) => ({
        cursor: prevState.cursor - 1
      })) : (event.keyCode === 40 || event.keyCode === 39) && cursor < this.getPhotos().length - 1 && this.setState((prevState) => ({
        cursor: prevState.cursor + 1
      }));
    }), __publicField(this, "updateCursor", (photo) => {
      const index = this.getPhotos().findIndex((result) => result.id === photo.id);
      this.setState({ cursor: index });
    }), __publicField(this, "renderImage", (props) => {
      const { photo, layout } = props, active = this.getPhotos().findIndex((result) => result.id === photo.data.id) === this.state.cursor || !1;
      return /* @__PURE__ */ jsxRuntime.jsx(
        Photo,
        {
          onClick: this.handleSelect.bind(photo.data),
          onKeyDown: this.handleKeyDown,
          data: photo.data,
          width: layout.width,
          height: layout.height,
          active,
          onFocus: this.updateCursor
        }
      );
    });
  }
  componentDidMount() {
    this.searchSubscription = search(
      this.props.client,
      this.searchSubject$,
      this.pageSubject$,
      RESULTS_PER_PAGE
    ).subscribe({
      next: (results) => {
        this.setState((prev) => ({
          searchResults: [...prev.searchResults, results],
          isLoading: !1
        }));
      }
    });
  }
  componentWillUnmount() {
    this.searchSubscription && this.searchSubscription.unsubscribe();
  }
  getPhotos() {
    return this.state.searchResults.flat();
  }
  render() {
    const { query, searchResults, isLoading } = this.state;
    return /* @__PURE__ */ jsxRuntime.jsx(
      ui.Dialog,
      {
        animate: !0,
        id: "unsplash-asset-source",
        header: "Select image from Unsplash",
        onClose: this.handleClose,
        open: !0,
        width: 4,
        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, paddingX: 4, paddingBottom: 4, children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            SearchInput,
            {
              clearButton: query.length > 0,
              icon: icons.SearchIcon,
              onChange: this.handleSearchTermChanged,
              onClear: this.handleSearchTermCleared,
              placeholder: "Search by topics or colors",
              value: query
            }
          ),
          !isLoading && this.getPhotos().length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "No results found" }),
          /* @__PURE__ */ jsxRuntime.jsx(
            InfiniteScroll__default.default,
            {
              dataLength: this.getPhotos().length,
              next: this.handleScollerLoadMore,
              hasMore: !0,
              scrollThreshold: 0.99,
              height: "60vh",
              loader: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { muted: !0 }) }),
              endMessage: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: "No more results" }),
              children: searchResults.filter((photos) => photos.length > 0).map((photos, index) => /* @__PURE__ */ jsxRuntime.jsx(
                PhotoAlbum__default.default,
                {
                  layout: "rows",
                  spacing: PHOTO_SPACING,
                  padding: PHOTO_PADDING,
                  targetRowHeight: (width) => width < 300 ? 150 : width < 600 ? 200 : 300,
                  photos: photos.map((photo) => ({
                    src: photo.urls.small,
                    width: photo.width,
                    height: photo.height,
                    key: photo.id,
                    data: photo
                  })),
                  renderPhoto: this.renderImage,
                  componentsProps: {
                    containerProps: { style: { marginBottom: `${PHOTO_SPACING}px` } }
                  }
                },
                `gallery-${query || "popular"}-${index}`
              ))
            }
          )
        ] })
      }
    );
  }
}
__publicField(UnsplashAssetSourceInternal, "defaultProps", {
  selectedAssets: void 0
});
const unsplashAssetSource = {
  name: "unsplash",
  title: "Unsplash",
  component: UnsplashAssetSource,
  icon: UnsplashIcon
}, unsplashImageAsset = sanity.definePlugin({
  name: "asset-source-unsplash-plugin",
  form: {
    image: {
      assetSources: (prev) => [...prev, unsplashAssetSource]
    }
  }
});
exports.unsplashAssetSource = unsplashAssetSource;
exports.unsplashImageAsset = unsplashImageAsset;
//# sourceMappingURL=index.cjs.map