"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TracksEditor;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _url = require("@wordpress/url");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

const ALLOWED_TYPES = ['text/vtt'];
const DEFAULT_KIND = 'subtitles';
const KIND_OPTIONS = [{
  label: (0, _i18n.__)('Subtitles'),
  value: 'subtitles'
}, {
  label: (0, _i18n.__)('Captions'),
  value: 'captions'
}, {
  label: (0, _i18n.__)('Descriptions'),
  value: 'descriptions'
}, {
  label: (0, _i18n.__)('Chapters'),
  value: 'chapters'
}, {
  label: (0, _i18n.__)('Metadata'),
  value: 'metadata'
}];
function TrackList({
  tracks,
  onEditPress
}) {
  let content;
  if (tracks.length === 0) {
    content = /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      className: "block-library-video-tracks-editor__tracks-informative-message",
      children: (0, _i18n.__)('Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.')
    });
  } else {
    content = tracks.map((track, index) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        className: "block-library-video-tracks-editor__track-list-track",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
          children: [track.label, " "]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          __next40pxDefaultSize: true,
          variant: "tertiary",
          onClick: () => onEditPress(index),
          "aria-label": (0, _i18n.sprintf)( /* translators: %s: Label of the video text track e.g: "French subtitles" */
          (0, _i18n.__)('Edit %s'), track.label),
          children: (0, _i18n.__)('Edit')
        })]
      }, index);
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
    label: (0, _i18n.__)('Text tracks'),
    className: "block-library-video-tracks-editor__track-list",
    children: content
  });
}
function SingleTrackEditor({
  track,
  onChange,
  onClose,
  onRemove
}) {
  const {
    src = '',
    label = '',
    srcLang = '',
    kind = DEFAULT_KIND
  } = track;
  const fileName = src.startsWith('blob:') ? '' : (0, _url.getFilename)(src) || '';
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.NavigableMenu, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      className: "block-library-video-tracks-editor__single-track-editor",
      spacing: "4",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "block-library-video-tracks-editor__single-track-editor-edit-track-label",
        children: (0, _i18n.__)('Edit track')
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        children: [(0, _i18n.__)('File'), ": ", /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
          children: fileName
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalGrid, {
        columns: 2,
        gap: 4,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true
          /* eslint-disable jsx-a11y/no-autofocus */,
          autoFocus: true
          /* eslint-enable jsx-a11y/no-autofocus */,
          onChange: newLabel => onChange({
            ...track,
            label: newLabel
          }),
          label: (0, _i18n.__)('Label'),
          value: label,
          help: (0, _i18n.__)('Title of track')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true,
          onChange: newSrcLang => onChange({
            ...track,
            srcLang: newSrcLang
          }),
          label: (0, _i18n.__)('Source language'),
          value: srcLang,
          help: (0, _i18n.__)('Language tag (en, fr, etc.)')
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: "8",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true,
          className: "block-library-video-tracks-editor__single-track-editor-kind-select",
          options: KIND_OPTIONS,
          value: kind,
          label: (0, _i18n.__)('Kind'),
          onChange: newKind => {
            onChange({
              ...track,
              kind: newKind
            });
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          className: "block-library-video-tracks-editor__single-track-editor-buttons-container",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "secondary",
            onClick: () => {
              const changes = {};
              let hasChanges = false;
              if (label === '') {
                changes.label = (0, _i18n.__)('English');
                hasChanges = true;
              }
              if (srcLang === '') {
                changes.srcLang = 'en';
                hasChanges = true;
              }
              if (track.kind === undefined) {
                changes.kind = DEFAULT_KIND;
                hasChanges = true;
              }
              if (hasChanges) {
                onChange({
                  ...track,
                  ...changes
                });
              }
              onClose();
            },
            children: (0, _i18n.__)('Close')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            isDestructive: true,
            variant: "link",
            onClick: onRemove,
            children: (0, _i18n.__)('Remove track')
          })]
        })]
      })]
    })
  });
}
function TracksEditor({
  tracks = [],
  onChange
}) {
  const mediaUpload = (0, _data.useSelect)(select => {
    return select(_blockEditor.store).getSettings().mediaUpload;
  }, []);
  const [trackBeingEdited, setTrackBeingEdited] = (0, _element.useState)(null);
  if (!mediaUpload) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
    contentClassName: "block-library-video-tracks-editor",
    renderToggle: ({
      isOpen,
      onToggle
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
        label: (0, _i18n.__)('Text tracks'),
        showTooltip: true,
        "aria-expanded": isOpen,
        "aria-haspopup": "true",
        onClick: onToggle,
        children: (0, _i18n.__)('Text tracks')
      })
    }),
    renderContent: () => {
      if (trackBeingEdited !== null) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleTrackEditor, {
          track: tracks[trackBeingEdited],
          onChange: newTrack => {
            const newTracks = [...tracks];
            newTracks[trackBeingEdited] = newTrack;
            onChange(newTracks);
          },
          onClose: () => setTrackBeingEdited(null),
          onRemove: () => {
            onChange(tracks.filter((_track, index) => index !== trackBeingEdited));
            setTrackBeingEdited(null);
          }
        });
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.NavigableMenu, {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TrackList, {
            tracks: tracks,
            onEditPress: setTrackBeingEdited
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
            className: "block-library-video-tracks-editor__add-tracks-container",
            label: (0, _i18n.__)('Add tracks'),
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
              onSelect: ({
                url
              }) => {
                const trackIndex = tracks.length;
                onChange([...tracks, {
                  src: url
                }]);
                setTrackBeingEdited(trackIndex);
              },
              allowedTypes: ALLOWED_TYPES,
              render: ({
                open
              }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
                icon: _icons.media,
                onClick: open,
                children: (0, _i18n.__)('Open Media Library')
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadCheck, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormFileUpload, {
                onChange: event => {
                  const files = event.target.files;
                  const trackIndex = tracks.length;
                  mediaUpload({
                    allowedTypes: ALLOWED_TYPES,
                    filesList: files,
                    onFileChange: ([{
                      url
                    }]) => {
                      const newTracks = [...tracks];
                      if (!newTracks[trackIndex]) {
                        newTracks[trackIndex] = {};
                      }
                      newTracks[trackIndex] = {
                        ...tracks[trackIndex],
                        src: url
                      };
                      onChange(newTracks);
                      setTrackBeingEdited(trackIndex);
                    }
                  });
                },
                accept: ".vtt,text/vtt",
                render: ({
                  openFileDialog
                }) => {
                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
                    icon: _icons.upload,
                    onClick: () => {
                      openFileDialog();
                    },
                    children: (0, _i18n.__)('Upload')
                  });
                }
              })
            })]
          })]
        })
      });
    }
  });
}
//# sourceMappingURL=tracks-editor.js.map