import { jsx } from 'react/jsx-runtime';
import { PureComponent } from 'react';
import { getValueFormats } from '@grafana/data';
import { t } from '@grafana/i18n';
import { Cascader } from '../Cascader/Cascader.mjs';

"use strict";
function formatCreateLabel(input) {
  return `Custom unit: ${input}`;
}
class UnitPicker extends PureComponent {
  constructor() {
    super(...arguments);
    this.onChange = (value) => {
      this.props.onChange(value.value);
    };
  }
  render() {
    const { value, width, id } = this.props;
    let current = void 0;
    const unitGroups = getValueFormats();
    const groupOptions = unitGroups.map((group) => {
      const options = group.submenu.map((unit) => {
        const sel = {
          label: unit.text,
          value: unit.value
        };
        if (unit.value === value) {
          current = sel;
        }
        return sel;
      });
      return {
        label: group.text,
        value: group.text,
        items: options
      };
    });
    if (value && !current) {
      current = { value, label: value };
    }
    return /* @__PURE__ */ jsx(
      Cascader,
      {
        id,
        width,
        initialValue: current && current.label,
        allowCustomValue: true,
        changeOnSelect: false,
        formatCreateLabel,
        options: groupOptions,
        placeholder: t("grafana-ui.unit-picker.placeholder", "Choose"),
        isClearable: true,
        onSelect: this.props.onChange
      }
    );
  }
}

export { UnitPicker };
//# sourceMappingURL=UnitPicker.mjs.map
