import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useIntl } from "react-intl";
import { DialogListHeader } from "../../Dialog/DialogList/DialogListHeader.js";
import { DialogListLoading } from "../../Dialog/DialogList/DialogListLoading.js";
import { StylingSettingList } from "./StylingSettingList.js";
import { StylingSettingListItem } from "./StylingSettingListItem.js";
export function StylingSettingBody({ isMobile, defaultItem, customItems, itemToColorPreview, emptyMessage, isLoading, onListActionClick, initiallySelectedItemRef, selectedItemRef, onItemClick, onItemEdit, onItemDelete, onItemMenuToggle, isEditingSupported, }) {
    const intl = useIntl();
    return (_jsx("div", { className: "gd-styling-picker-body", children: isLoading ? (_jsx(DialogListLoading, { className: "gd-styling-picker-body-loading s-styling-picker-body-loading" })) : (_jsxs(_Fragment, { children: [
                _jsxs("div", { children: [
                        _jsx(DialogListHeader, { className: "gd-styling-picker-list-header", title: intl.formatMessage({ id: "stylingPicker.title.basic" }) }), _jsx(StylingSettingListItem, { item: defaultItem, itemToColorPreview: itemToColorPreview, isSelected: !selectedItemRef, onClick: () => onItemClick(null) })
                    ] }), _jsxs("div", { className: "gd-styling-picker-list-wrapper", children: [
                        _jsx(DialogListHeader, { title: intl.formatMessage({ id: "stylingPicker.title.custom" }), buttonTitle: isMobile || !isEditingSupported
                                ? undefined
                                : intl.formatMessage({ id: "stylingPicker.title.create" }), onButtonClick: onListActionClick, className: "gd-styling-picker-list-header s-styling-picker-list-header" }), _jsx(StylingSettingList, { items: customItems, itemToColorPreview: itemToColorPreview, emptyMessageElement: emptyMessage(), onItemClick: onItemClick, onItemEdit: isMobile || !isEditingSupported ? undefined : onItemEdit, onItemDelete: isMobile || !isEditingSupported ? undefined : onItemDelete, initiallySelectedItemRef: initiallySelectedItemRef ?? undefined, selectedItemRef: selectedItemRef, onItemMenuToggle: onItemMenuToggle })
                    ] })
            ] })) }));
}
