import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
import { useIntl } from "react-intl";
import { IntlWrapper } from "@gooddata/sdk-ui";
import { CustomFormatDialog } from "./customFormatDialog/CustomFormatDialog.js";
import { PresetsDropdown } from "./presetsDropdown/PresetsDropdown.js";
import { PresetType } from "./typings.js";
export const CUSTOM_FORMAT_PRESET_LOCAL_IDENTIFIER = "customFormat";
function MeasureNumberFormatCore(props) {
    const intl = useIntl();
    const { toggleButton: ToggleButton, disabled, anchorElementSelector, presets, separators, selectedFormat, defaultCustomFormat, presetsDropdownPositioning, customFormatDialogPositioning, documentationLink, templates, setFormat, } = props;
    const toggleButtonEl = useRef(null);
    const getCustomFormatPreset = useCallback(() => ({
        name: intl.formatMessage({ id: "measureNumberFormat.custom.optionLabel" }),
        localIdentifier: CUSTOM_FORMAT_PRESET_LOCAL_IDENTIFIER,
        format: null,
        previewNumber: null,
        type: PresetType.CUSTOM_FORMAT,
    }), [intl]);
    const findSelectedPreset = useCallback(() => presets.find((preset) => preset.format === selectedFormat) ||
        getCustomFormatPreset(), [presets, selectedFormat, getCustomFormatPreset]);
    const [showDropdown, setShowDropdown] = useState(false);
    const [showCustomFormatDialog, setShowCustomFormatDialog] = useState(false);
    const [selectedPreset, setSelectedPreset] = useState(() => findSelectedPreset());
    // Update selectedPreset when props change
    useEffect(() => {
        setSelectedPreset(findSelectedPreset());
    }, [findSelectedPreset]);
    const isCustomPreset = useCallback(({ localIdentifier, type }) => localIdentifier === CUSTOM_FORMAT_PRESET_LOCAL_IDENTIFIER && type === PresetType.CUSTOM_FORMAT, []);
    const toggleCustomFormatDialog = useCallback((open = false) => {
        setShowCustomFormatDialog(open);
    }, []);
    const closeDropdown = useCallback(() => {
        setShowDropdown(false);
    }, []);
    const toggleDropdownOpened = useCallback((e) => {
        toggleButtonEl.current = e.currentTarget;
        setShowDropdown((prevState) => !prevState);
        toggleCustomFormatDialog();
    }, [toggleCustomFormatDialog]);
    const onCustomFormatDialogApply = useCallback((format) => {
        toggleCustomFormatDialog(false);
        setSelectedPreset(getCustomFormatPreset());
        setFormat(format);
    }, [toggleCustomFormatDialog, getCustomFormatPreset, setFormat]);
    const onCustomFormatDialogCancel = useCallback(() => {
        toggleCustomFormatDialog(false);
    }, [toggleCustomFormatDialog]);
    const onSelect = useCallback((selectedPreset) => {
        closeDropdown();
        if (isCustomPreset(selectedPreset)) {
            toggleCustomFormatDialog(true);
        }
        else {
            setSelectedPreset(selectedPreset);
            setFormat(selectedPreset.format);
        }
    }, [closeDropdown, isCustomPreset, toggleCustomFormatDialog, setFormat]);
    const buttonText = useMemo(() => intl.formatMessage({ id: "measureNumberFormat.buttonLabel" }, { selectedFormatPresetName: selectedPreset.name }), [intl, selectedPreset.name]);
    const anchorEl = anchorElementSelector ?? toggleButtonEl.current ?? undefined;
    const customPreset = getCustomFormatPreset();
    return (_jsxs(_Fragment, { children: [
            _jsx(ToggleButton, { text: buttonText, isOpened: showDropdown || showCustomFormatDialog, toggleDropdown: toggleDropdownOpened, selectedPreset: selectedPreset, disabled: disabled }), showDropdown ? (_jsx(PresetsDropdown, { presets: presets, customPreset: customPreset, separators: separators, selectedPreset: selectedPreset, onSelect: onSelect, onClose: closeDropdown, anchorEl: anchorEl, positioning: presetsDropdownPositioning, intl: intl })) : null, showCustomFormatDialog ? (_jsx(CustomFormatDialog, { onApply: onCustomFormatDialogApply, onCancel: onCustomFormatDialogCancel, formatString: selectedFormat ?? defaultCustomFormat ?? "", separators: separators, anchorEl: anchorEl, positioning: customFormatDialogPositioning, documentationLink: documentationLink, templates: templates, intl: intl })) : null] }));
}
/**
 * @internal
 */
export const MeasureNumberFormat = memo(function MeasureNumberFormat(props) {
    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(MeasureNumberFormatCore, { ...props }) }));
});
