import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback } from "react";
import { Dropdown } from "../../../../Dropdown/Dropdown.js";
import { DropdownButton } from "../../../../Dropdown/DropdownButton.js";
import { DropdownList } from "../../../../Dropdown/DropdownList.js";
import { SingleSelectListItem } from "../../../../List/ListItem.js";
import { getDefaultHeightForEmbedCodeByUnit } from "../../utils.js";
import { DEFAULT_UNIT, UNITS } from "../types.js";
import { NumericInput } from "./NumericInput.js";
/**
 * @internal
 */
export function HeightSetting({ value, onValueChange, unit = DEFAULT_UNIT }) {
    const onChange = useCallback((val) => {
        if (val !== value) {
            onValueChange(val, unit);
        }
    }, [value, unit, onValueChange]);
    const onUnitChange = useCallback((unit) => {
        onValueChange(getDefaultHeightForEmbedCodeByUnit(unit), unit);
    }, [onValueChange]);
    return (_jsxs("div", { className: "height-setting-component", children: [
            _jsx(NumericInput, { value: value ?? getDefaultHeightForEmbedCodeByUnit(unit), onValueChanged: onChange }), _jsx(UnitSelect, { selectedUnit: unit, onSelectUnit: onUnitChange })
        ] }));
}
const items = UNITS.map((u) => ({ id: u, title: u }));
function UnitSelect({ selectedUnit, onSelectUnit }) {
    return (_jsx(Dropdown, { renderBody: ({ closeDropdown }) => (_jsx(DropdownList, { items: items, width: 60, renderItem: ({ item }) => {
                return (_jsx(SingleSelectListItem, { title: item.title, isSelected: item.id === selectedUnit, onClick: () => {
                        onSelectUnit(item.id);
                        closeDropdown();
                    } }));
            } })), renderButton: ({ openDropdown, isOpen }) => (_jsx(DropdownButton, { value: selectedUnit, isOpen: isOpen, onClick: openDropdown })) }));
}
