import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { useCallback, useState } from "react";
import { isEqual } from "lodash-es";
import { useIntl } from "react-intl";
import { Button } from "../Button/Button.js";
import { ColorPickerMatrix } from "./components/ColorPickerMatrix.js";
import { ColorsPreview } from "./components/ColorsPreview.js";
import { HexColorInput } from "./components/HexColorInput.js";
import { HueColorPicker } from "./components/HueColorPicker.js";
import { getHslFromRgbColor, getRgbFromHslColor, isHslColorBlackOrWhite } from "./utils.js";
/**
 * @internal
 */
export function ColorPicker(props) {
    const intl = useIntl();
    const currentHslColor = getHslFromRgbColor(props.initialRgbColor);
    const [draftHslColor, setDraftHslColor] = useState(currentHslColor);
    const onColorSelected = useCallback((selectedColor) => {
        setDraftHslColor(selectedColor);
    }, []);
    const onHexInputColorSelected = useCallback((selectedColor) => {
        if (isHslColorBlackOrWhite(selectedColor)) {
            setDraftHslColor((prevColor) => ({
                ...selectedColor,
                h: prevColor.h,
            }));
        }
        else {
            setDraftHslColor(selectedColor);
        }
    }, []);
    const handleSubmit = useCallback(() => {
        props.onSubmit(getRgbFromHslColor(draftHslColor));
    }, [props, draftHslColor]);
    const currentHslColorForPreview = getHslFromRgbColor(props.initialRgbColor);
    return (_jsxs("div", { className: "color-picker-container", "aria-label": "Color picker", children: [
            _jsx(ColorPickerMatrix, { initColor: draftHslColor, onColorSelected: onColorSelected }), _jsxs("div", { className: "color-picker-control-wrapper", children: [
                    _jsx(HueColorPicker, { initColor: draftHslColor, onChange: onColorSelected }), _jsx(HexColorInput, { initColor: draftHslColor, onInputChanged: onHexInputColorSelected, placeholder: intl.formatMessage({ id: "gs.color-picker.inputPlaceholder" }), label: intl.formatMessage({ id: "gs.color-picker.hex" }) }, `${draftHslColor.h}-${draftHslColor.s}-${draftHslColor.l}`), _jsx(ColorsPreview, { currentHslColor: currentHslColorForPreview, draftHslColor: draftHslColor, currentTextLabel: intl.formatMessage({ id: "gs.color-picker.currentColor" }), draftTextLabel: intl.formatMessage({ id: "gs.color-picker.newColor" }) }), _jsxs("div", { className: "color-picker-buttons-wrapper", children: [
                            _jsx(Button, { value: intl.formatMessage({ id: "gs.color-picker.cancelButton" }), className: "gd-button-secondary gd-button color-picker-button", onClick: props.onCancel }), _jsx(Button, { value: intl.formatMessage({ id: "gs.color-picker.okButton" }), disabled: isEqual(props.initialRgbColor, getRgbFromHslColor(draftHslColor)), className: "gd-button-action gd-button color-picker-ok-button", onClick: handleSubmit })
                        ] })
                ] })
        ] }));
}
