// packages/block-editor/src/components/date-format-picker/index.js
import { _x, __ } from "@wordpress/i18n";
import { dateI18n, humanTimeDiff } from "@wordpress/date";
import { useState, createInterpolateElement } from "@wordpress/element";
import {
  TextControl,
  ExternalLink,
  VisuallyHidden,
  ToggleControl,
  __experimentalVStack as VStack,
  CustomSelectControl
} from "@wordpress/components";
import { jsx, jsxs } from "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__ */ jsxs(
    VStack,
    {
      as: "fieldset",
      spacing: 4,
      className: "block-editor-date-format-picker",
      children: [
        /* @__PURE__ */ jsx(VisuallyHidden, { as: "legend", children: __("Date format") }),
        /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Default format"),
            help: `${__("Example:")}  ${dateI18n(
              defaultFormat,
              exampleDate
            )}`,
            checked: !format,
            onChange: (checked) => onChange(checked ? null : defaultFormat)
          }
        ),
        format && /* @__PURE__ */ 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 */
      _x("n/j/Y", "short date format"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      _x("n/j/Y g:i A", "short date format with time"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      _x("M j, Y", "medium date format"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      _x("M j, Y g:i A", "medium date format with time"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      _x("F j, Y", "long date format"),
      /* translators: See https://www.php.net/manual/datetime.format.php */
      _x("M j", "short date format without the year")
    ])
  ];
  const suggestedOptions = [
    ...suggestedFormats.map((suggestedFormat, index) => ({
      key: `suggested-${index}`,
      name: dateI18n(suggestedFormat, exampleDate),
      format: suggestedFormat
    })),
    {
      key: "human-diff",
      name: humanTimeDiff(exampleDate),
      format: "human-diff"
    }
  ];
  const customOption = {
    key: "custom",
    name: __("Custom"),
    className: "block-editor-date-format-picker__custom-format-select-control__custom-option",
    hint: __("Enter your own date format")
  };
  const [isCustom, setIsCustom] = useState(
    () => !!format && !suggestedOptions.some((option) => option.format === format)
  );
  return /* @__PURE__ */ jsxs(VStack, { children: [
    /* @__PURE__ */ jsx(
      CustomSelectControl,
      {
        __next40pxDefaultSize: true,
        label: __("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__ */ jsx(
      TextControl,
      {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: __("Custom format"),
        hideLabelFromVision: true,
        help: createInterpolateElement(
          __(
            "Enter a date or time <Link>format string</Link>."
          ),
          {
            Link: /* @__PURE__ */ jsx(
              ExternalLink,
              {
                href: __(
                  "https://wordpress.org/documentation/article/customize-date-and-time-format/"
                )
              }
            )
          }
        ),
        value: format,
        onChange: (value) => onChange(value)
      }
    )
  ] });
}
export {
  DateFormatPicker as default
};
//# sourceMappingURL=index.js.map
