import { h, Host } from "@stencil/core";
import { COLOR_PALETTES } from "../../util/color-palettes";
const NONE_VALUE = '';
const SWATCH_STYLE = {
    display: 'block',
    order: 3,
    width: '6rem',
    flexShrink: 0,
    marginRight: '-0.5rem',
};
/**
 * Picks a color palette from the built-in color-palettes registry,
 * and shows the palette's swatches alongside its title — both in
 * the dropdown row and in the selected trigger area.
 *
 * ### When to use this picker
 *
 * Use it when a Lime CRM widget needs the admin to choose a set of
 * colors purely for **visual differentiation** between items in a
 * list. The picker's contract is "give every item a distinct, nicely
 * harmonized color"; it does **not** assume any item-to-color
 * mapping is meaningful. Concrete examples:
 *
 * - bars / slices in a chart widget
 * - swimlanes in a kanban view
 * - event categories in a calendar
 * - tag chips on a list view
 *
 * ### When **not** to use it
 *
 * Don't use this picker when colors carry semantic meaning that
 * end users must learn and rely on — e.g. _red = high priority_,
 * _green = healthy_, _yellow = pending_. The palette's color order
 * and contents may evolve over time (designers tweaking shades,
 * appending new colors, retiring duplicates), so item-to-color
 * mappings are intentionally **not** stable across releases. For
 * status / priority / severity surfaces, encode meaning at the
 * value level (icons, badges, labels) rather than color alone.
 *
 * @exampleComponent limebb-example-color-palette-picker
 * @beta
 */
export class ColorPalettePicker {
    constructor() {
        this.options = [];
        this.optionsById = new Map();
        this.handleChange = (event) => {
            var _a;
            event.stopPropagation();
            const detail = event
                .detail;
            const option = Array.isArray(detail) ? detail[0] : detail;
            this.change.emit((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : NONE_VALUE);
        };
    }
    componentWillLoad() {
        this.options = buildOptions();
        this.optionsById = new Map(this.options.map((option) => [option.value, option]));
    }
    render() {
        return (h(Host, { key: '60917a56a3aede46b8fdcae4ea47ea61801edc3e' }, h("limel-select", { key: '9903a9645f7c46d6f7d96f7683b592716e38320e', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, options: this.options, value: this.getSelectedOption(), onChange: this.handleChange })));
    }
    /**
     * Resolve `this.value` against the cached options map. Returns
     * `undefined` when no value is set (so the trigger renders
     * unselected), or falls back to the (none) option when the value
     * is set but unrecognized — with a one-time warning so a
     * developer integrating the picker sees the stale id during
     * debugging.
     */
    getSelectedOption() {
        if (!this.value) {
            return undefined;
        }
        const match = this.optionsById.get(this.value);
        if (match) {
            return match;
        }
        if (this.lastWarnedValue !== this.value) {
            console.warn(`limebb-color-palette-picker: palette "${this.value}" was not found in the registry. Rendering as (none).`);
            this.lastWarnedValue = this.value;
        }
        return this.optionsById.get(NONE_VALUE);
    }
    static get is() { return "limebb-color-palette-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["color-palette-picker.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["color-palette-picker.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The value of the current property"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Whether or not the current property is required"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Whether or not the current property is readonly"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "readonly"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invalid"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Whether or not the current property is disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The label of the current property"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The helper text for the current property"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-text"
            }
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the user picks a different palette. The detail is\nthe chosen palette's `id`."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
/**
 * Build the limel-select options once. Palettes don't change at
 * runtime, so this work happens once per component instance instead
 * of on every render.
 */
function buildOptions() {
    return [
        { text: '', value: NONE_VALUE },
        ...COLOR_PALETTES.map((palette) => ({
            text: palette.title,
            secondaryText: palette.description,
            value: palette.id,
            primaryComponent: {
                name: 'limebb-color-palette-swatches',
                props: {
                    colors: palette.colors,
                    style: SWATCH_STYLE,
                },
            },
        })),
    ];
}
