/* wp:polyfill */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ShadowsPanel;
exports.defaultShadow = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _lockUnlock = require("../../lock-unlock");
var _subtitle = _interopRequireDefault(require("./subtitle"));
var _navigationButton = require("./navigation-button");
var _header = _interopRequireDefault(require("./header"));
var _utils = require("./utils");
var _element = require("@wordpress/element");
var _confirmResetShadowDialog = _interopRequireDefault(require("./confirm-reset-shadow-dialog"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalSetting
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const {
  Menu
} = (0, _lockUnlock.unlock)(_components.privateApis);
const defaultShadow = exports.defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
function ShadowsPanel() {
  const [defaultShadows] = useGlobalSetting('shadow.presets.default');
  const [defaultShadowsEnabled] = useGlobalSetting('shadow.defaultPresets');
  const [themeShadows] = useGlobalSetting('shadow.presets.theme');
  const [customShadows, setCustomShadows] = useGlobalSetting('shadow.presets.custom');
  const onCreateShadow = shadow => {
    setCustomShadows([...(customShadows || []), shadow]);
  };
  const handleResetShadows = () => {
    setCustomShadows([]);
  };
  const [isResetDialogOpen, setIsResetDialogOpen] = (0, _element.useState)(false);
  const toggleResetDialog = () => setIsResetDialogOpen(!isResetDialogOpen);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [isResetDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmResetShadowDialog.default, {
      text: (0, _i18n.__)('Are you sure you want to remove all custom shadows?'),
      confirmButtonText: (0, _i18n.__)('Remove'),
      isOpen: isResetDialogOpen,
      toggleOpen: toggleResetDialog,
      onConfirm: handleResetShadows
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: (0, _i18n.__)('Shadows'),
      description: (0, _i18n.__)('Manage and create shadow styles for use across the site.')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-global-styles-screen",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        className: "edit-site-global-styles__shadows-panel",
        spacing: 7,
        children: [defaultShadowsEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowList, {
          label: (0, _i18n.__)('Default'),
          shadows: defaultShadows || [],
          category: "default"
        }), themeShadows && themeShadows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowList, {
          label: (0, _i18n.__)('Theme'),
          shadows: themeShadows || [],
          category: "theme"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowList, {
          label: (0, _i18n.__)('Custom'),
          shadows: customShadows || [],
          category: "custom",
          canCreate: true,
          onCreate: onCreateShadow,
          onReset: toggleResetDialog
        })]
      })
    })]
  });
}
function ShadowList({
  label,
  shadows,
  category,
  canCreate,
  onCreate,
  onReset
}) {
  const handleAddShadow = () => {
    const newIndex = (0, _utils.getNewIndexFromPresets)(shadows, 'shadow-');
    onCreate({
      name: (0, _i18n.sprintf)(/* translators: %s: is an index for a preset */
      (0, _i18n.__)('Shadow %s'), newIndex),
      shadow: defaultShadow,
      slug: `shadow-${newIndex}`
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 2,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      justify: "space-between",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
        align: "center",
        className: "edit-site-global-styles__shadows-panel__title",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
          level: 3,
          children: label
        })
      }), canCreate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        className: "edit-site-global-styles__shadows-panel__options-container",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          size: "small",
          icon: _icons.plus,
          label: (0, _i18n.__)('Add shadow'),
          onClick: () => {
            handleAddShadow();
          }
        })
      }), !!shadows?.length && category === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            size: "small",
            icon: _icons.moreVertical,
            label: (0, _i18n.__)('Shadow options')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Popover, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Item, {
            onClick: onReset,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
              children: (0, _i18n.__)('Remove all custom shadows')
            })
          })
        })]
      })]
    }), shadows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
      isBordered: true,
      isSeparated: true,
      children: shadows.map(shadow => /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowItem, {
        shadow: shadow,
        category: category
      }, shadow.slug))
    })]
  });
}
function ShadowItem({
  shadow,
  category
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
    path: `/shadows/edit/${category}/${shadow.slug}`,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        children: shadow.name
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
      })]
    })
  });
}
//# sourceMappingURL=shadows-panel.js.map