import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2019-2026 GoodData Corporation
import { Fragment, cloneElement, memo, useCallback, useState, } from "react";
import { v4 as uuidv4 } from "uuid";
import { isColorFromPalette, isRgbColor, } from "@gooddata/sdk-model";
import { ColorPicker } from "@gooddata/sdk-ui-kit";
import { ColorOverlay, DropdownVersionType } from "./ColorOverlay.js";
import { ColorPalette } from "./ColorPalette.js";
import { CustomColorButton } from "./CustomColorButton.js";
export var IconPosition;
(function (IconPosition) {
    IconPosition[IconPosition["Down"] = 0] = "Down";
    IconPosition[IconPosition["Right"] = 1] = "Right";
})(IconPosition || (IconPosition = {}));
const COLOR_FOR_UNKNOWN_ITEM = {
    r: 255,
    g: 0,
    b: 0,
};
export const ColorDropdown = memo(function ColorDropdown({ selectedColorItem, colorPalette, onColorSelected: onColorSelectedProp, disabled, children, chartFill, patternFillIndex, }) {
    const [id] = useState(() => uuidv4());
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const [dropdownVersion, setDropdownVersion] = useState(DropdownVersionType.ColorPalette);
    const getClassName = useCallback(() => {
        return `s-color-drop-down-button-${id}`;
    }, [id]);
    const getIconPosition = useCallback(() => {
        return dropdownVersion === DropdownVersionType.ColorPalette ? IconPosition.Down : IconPosition.Right;
    }, [dropdownVersion]);
    const isColorPaletteContent = useCallback(() => {
        return dropdownVersion === DropdownVersionType.ColorPalette;
    }, [dropdownVersion]);
    const getSelectedGuidFromColorItem = useCallback(() => {
        if (isColorFromPalette(selectedColorItem)) {
            return selectedColorItem.value;
        }
        return null;
    }, [selectedColorItem]);
    const getSelectedColorFromPalette = useCallback(() => {
        if (isColorFromPalette(selectedColorItem)) {
            const selected = colorPalette.find((item) => {
                return item.guid === selectedColorItem.value;
            });
            if (selected) {
                return selected.fill;
            }
        }
        if (isRgbColor(selectedColorItem)) {
            return selectedColorItem.value;
        }
        return COLOR_FOR_UNKNOWN_ITEM;
    }, [selectedColorItem, colorPalette]);
    const onClose = useCallback(() => {
        setIsDropdownOpen(false);
        setDropdownVersion(DropdownVersionType.ColorPalette);
    }, []);
    const onColorSelected = useCallback((color) => {
        setIsDropdownOpen(false);
        setDropdownVersion(DropdownVersionType.ColorPalette);
        setTimeout(() => {
            onColorSelectedProp(color);
        }, 100);
    }, [onColorSelectedProp]);
    const onColorPickerSubmit = useCallback((color) => {
        const item = {
            type: "rgb",
            value: color,
        };
        onColorSelected(item);
    }, [onColorSelected]);
    const onColorPickerCancel = useCallback(() => {
        setDropdownVersion(DropdownVersionType.ColorPalette);
    }, []);
    const onCustomColorButtonClick = useCallback(() => {
        setDropdownVersion(DropdownVersionType.ColorPicker);
    }, []);
    const toggleDropdown = useCallback(() => {
        setIsDropdownOpen(!isDropdownOpen);
        setDropdownVersion(DropdownVersionType.ColorPalette);
    }, [isDropdownOpen]);
    const onDropdownButtonClick = useCallback(() => {
        if (!disabled) {
            toggleDropdown();
        }
    }, [disabled, toggleDropdown]);
    const setupDropdownChild = useCallback(() => {
        const childProps = {
            isSelected: isDropdownOpen,
            position: getIconPosition(),
            disabled,
        };
        return cloneElement(children, childProps);
    }, [isDropdownOpen, getIconPosition, disabled, children]);
    const renderColorPaletteContent = useCallback(() => {
        return (_jsxs("div", { className: "gd-color-drop-down", children: [_jsx(ColorPalette, { selectedColorGuid: getSelectedGuidFromColorItem(), colorPalette: colorPalette, onColorSelected: onColorSelected, chartFill: chartFill, patternFillIndex: patternFillIndex }), _jsx(CustomColorButton, { onClick: onCustomColorButtonClick })] }));
    }, [
        getSelectedGuidFromColorItem,
        colorPalette,
        onColorSelected,
        onCustomColorButtonClick,
        chartFill,
        patternFillIndex,
    ]);
    const renderColorPickerContent = useCallback(() => {
        return (_jsx(ColorPicker, { initialRgbColor: getSelectedColorFromPalette(), onSubmit: onColorPickerSubmit, onCancel: onColorPickerCancel }));
    }, [getSelectedColorFromPalette, onColorPickerSubmit, onColorPickerCancel]);
    return (_jsxs(Fragment, { children: [_jsx("div", { className: getClassName(), onClick: onDropdownButtonClick, children: setupDropdownChild() }), isDropdownOpen ? (_jsx(ColorOverlay, { alignTo: `.${getClassName()}`, onClose: onClose, dropdownVersion: dropdownVersion, children: _jsx("div", { className: "overlay dropdown-body", children: isColorPaletteContent() ? renderColorPaletteContent() : renderColorPickerContent() }) }, dropdownVersion)) : null] }));
});
//# sourceMappingURL=ColorDropdown.js.map