"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/date-format-picker/index.js
var date_format_picker_exports = {};
__export(date_format_picker_exports, {
  default: () => DateFormatPicker
});
module.exports = __toCommonJS(date_format_picker_exports);
var import_i18n = require("@wordpress/i18n");
var import_date = require("@wordpress/date");
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_ui = require("@wordpress/ui");
var import_jsx_runtime = require("react/jsx-runtime");
var exampleDate = /* @__PURE__ */ new Date();
exampleDate.setDate(20);
exampleDate.setMonth(exampleDate.getMonth() - 3);
if (exampleDate.getMonth() === 4) {
  exampleDate.setMonth(3);
}
function DateFormatPicker({
  format,
  defaultFormat,
  onChange
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.__experimentalVStack,
    {
      as: "fieldset",
      spacing: 4,
      className: "block-editor-date-format-picker",
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.VisuallyHidden, { render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", {}), children: (0, import_i18n.__)("Date format") }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.ToggleControl,
          {
            label: (0, import_i18n.__)("Default format"),
            help: `${(0, import_i18n.__)("Example:")}  ${(0, import_date.dateI18n)(
              defaultFormat,
              exampleDate
            )}`,
            checked: !format,
            onChange: (checked) => onChange(checked ? null : defaultFormat)
          }
        ),
        format && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NonDefaultControls, { format, onChange })
      ]
    }
  );
}
function NonDefaultControls({ format, onChange }) {
  const suggestedFormats = [
    .../* @__PURE__ */ new Set([
      /* translators: See https://www.php.net/manual/datetime.format.php */
      "Y-m-d",
      /* translators: See https://www.php.net/manual/datetime.format.php */
      (0, import_i18n._x)("n/j/Y", "short date format"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      (0, import_i18n._x)("n/j/Y g:i A", "short date format with time"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      (0, import_i18n._x)("M j, Y", "medium date format"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      (0, import_i18n._x)("M j, Y g:i A", "medium date format with time"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      (0, import_i18n._x)("F j, Y", "long date format"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      (0, import_i18n._x)("M j", "short date format without the year")
    ])
  ];
  const suggestedOptions = [
    ...suggestedFormats.map((suggestedFormat, index) => ({
      key: `suggested-${index}`,
      name: (0, import_date.dateI18n)(suggestedFormat, exampleDate),
      format: suggestedFormat
    })),
    {
      key: "human-diff",
      name: (0, import_date.humanTimeDiff)(exampleDate),
      format: "human-diff"
    }
  ];
  const customOption = {
    key: "custom",
    name: (0, import_i18n.__)("Custom"),
    className: "block-editor-date-format-picker__custom-format-select-control__custom-option",
    hint: (0, import_i18n.__)("Enter your own date format")
  };
  const [isCustom, setIsCustom] = (0, import_element.useState)(
    () => !!format && !suggestedOptions.some((option) => option.format === format)
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.CustomSelectControl,
      {
        __next40pxDefaultSize: true,
        label: (0, import_i18n.__)("Choose a format"),
        options: [...suggestedOptions, customOption],
        value: isCustom ? customOption : suggestedOptions.find(
          (option) => option.format === format
        ) ?? customOption,
        onChange: ({ selectedItem }) => {
          if (selectedItem === customOption) {
            setIsCustom(true);
          } else {
            setIsCustom(false);
            onChange(selectedItem.format);
          }
        }
      }
    ),
    isCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.TextControl,
      {
        label: (0, import_i18n.__)("Custom format"),
        hideLabelFromVision: true,
        help: (0, import_element.createInterpolateElement)(
          (0, import_i18n.__)(
            "Enter a date or time <Link>format string</Link>."
          ),
          {
            Link: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_components.ExternalLink,
              {
                href: (0, import_i18n.__)(
                  "https://wordpress.org/documentation/article/customize-date-and-time-format/"
                )
              }
            )
          }
        ),
        value: format,
        onChange: (value) => onChange(value)
      }
    )
  ] });
}
//# sourceMappingURL=index.cjs.map
