import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useEffect, useMemo, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { areObjRefsEqual } from "@gooddata/sdk-model";
import { IntlWrapper } from "@gooddata/sdk-ui";
import { Button } from "../../Button/Button.js";
import { Hyperlink } from "../../Hyperlink/Hyperlink.js";
import { LoadingSpinner } from "../../LoadingSpinner/LoadingSpinner.js";
import { Message } from "../../Messages/Message.js";
import { useMediaQuery } from "../../responsive/useMediaQuery.js";
import { Footer } from "../Footer.js";
import { FooterButtons } from "../FooterButtons.js";
import { Header } from "../Header.js";
import { Separator } from "../Separator.js";
import { SettingWidget } from "../SettingWidget.js";
import { Title } from "../Title.js";
import { StylingSettingBody } from "./StylingSettingBody.js";
function StylingSettingWidgetCore({ title, defaultItem, customItems, itemToColorPreview, emptyMessage, selectedItemRef, isLoading, titleTooltip, footerHelpLink, footerHelpTitle, footerMobileMessage, shouldDisableCancelButton, shouldDisableApplyButton, onApply, onCancel, onListActionClick, onItemEdit, onItemDelete, className, onHelpClick, onItemSelect = () => { }, onItemMenuToggle, isEditingSupported = true, isSavingActionInProgress = false, }) {
    const intl = useIntl();
    const isMobileDevice = useMediaQuery("mobileDevice");
    const initiallySelectedItemRef = selectedItemRef ?? null;
    const [currentItemRef, setCurrentItemRef] = useState(initiallySelectedItemRef);
    useEffect(() => {
        setCurrentItemRef(selectedItemRef ?? null);
    }, [selectedItemRef]);
    useEffect(() => {
        // currentItemRef == null represents basic default theme, skip this check
        if (currentItemRef && !customItems.find((ci) => areObjRefsEqual(ci.ref, currentItemRef))) {
            setCurrentItemRef(initiallySelectedItemRef);
        }
    }, [currentItemRef, customItems, customItems.length, initiallySelectedItemRef]);
    const onItemClick = useCallback((ref) => {
        onItemSelect(ref);
        setCurrentItemRef(ref);
    }, [onItemSelect]);
    const isApplyButtonDisabled = useMemo(() => areObjRefsEqual(currentItemRef, selectedItemRef), [currentItemRef, selectedItemRef]);
    const handleCancel = useCallback(() => {
        setCurrentItemRef(selectedItemRef ?? null);
        onCancel?.();
    }, [onCancel, selectedItemRef]);
    const handleApply = useCallback(() => {
        onApply?.(currentItemRef);
    }, [onApply, currentItemRef]);
    return (_jsxs(SettingWidget, { className: cx("s-styling-picker", className), children: [
            _jsx(Header, { children: _jsx(Title, { title: title, tooltip: titleTooltip }) }), _jsx(StylingSettingBody, { isMobile: isMobileDevice, defaultItem: defaultItem, customItems: customItems, itemToColorPreview: itemToColorPreview, emptyMessage: emptyMessage, isLoading: isLoading, onListActionClick: onListActionClick, initiallySelectedItemRef: initiallySelectedItemRef, selectedItemRef: currentItemRef, onItemClick: onItemClick, onItemEdit: onItemEdit, onItemDelete: onItemDelete, onItemMenuToggle: onItemMenuToggle, isEditingSupported: isEditingSupported }), _jsx(Separator, {}), _jsxs(Footer, { children: [isMobileDevice && footerMobileMessage ? (_jsx(Message, { className: "gd-styling-picker-footer-message", type: "progress", children: footerMobileMessage })) : null, footerHelpLink && footerHelpTitle ? (_jsx(Hyperlink, { text: footerHelpTitle, href: footerHelpLink, iconClass: "gd-icon-circle-question", onClick: onHelpClick })) : null, _jsxs(FooterButtons, { children: [isSavingActionInProgress ? _jsx(LoadingSpinner, { className: "gd-dialog-spinner small" }) : null, _jsx(Button, { className: "gd-button-secondary", onClick: handleCancel, disabled: shouldDisableCancelButton ?? isApplyButtonDisabled, value: intl.formatMessage({ id: "cancel" }) }), _jsx(Button, { className: "gd-button-action", onClick: handleApply, disabled: (shouldDisableApplyButton ?? isApplyButtonDisabled) || isSavingActionInProgress, value: intl.formatMessage({ id: "apply" }) })
                        ] })
                ] })
        ] }));
}
/**
 * @internal
 */
export function StylingSettingWidget(props) {
    return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(StylingSettingWidgetCore, { ...props }) }));
}
