import { h } from "@stencil/core";
import { brightnesses, colors, createSwatch } from "./swatches";
/**
 * @private
 */
export class Palette {
    constructor() {
        /**
         * Set to `true` to indicate that the current value of the input field is
         * invalid.
         */
        this.invalid = false;
        /**
         * Set to `false` to disallow custom color values to be typed into the input field.
         */
        this.manualInput = true;
        this.renderSwatches = () => {
            return this.getPalette().map(this.renderSwatchButton);
        };
        this.renderSwatchButton = (swatch, index) => {
            const isSelected = this.value === swatch.value;
            const classList = {
                swatch: true,
                'swatch--selected': isSelected,
                'custom-swatch': this.usesCustomPalette(),
            };
            return (h("button", { class: classList, style: { '--limel-color-picker-swatch-color': swatch.value }, title: swatch.name, disabled: swatch.disabled, "data-index": index, key: index, onClick: this.handleSwatchClick(swatch.value) }));
        };
        this.handleChange = (event) => {
            event.stopPropagation();
            this.change.emit(event.detail);
        };
        this.handleSwatchClick = (value) => (event) => {
            event.stopPropagation();
            const newValue = this.value === value ? '' : value;
            this.change.emit(newValue);
        };
    }
    render() {
        const background = this.value ? { '--background': this.value } : {};
        return [
            h("div", { key: '184f8b9b74ebeb5611aa28ff3b14dbb225118af2', class: "color-picker-palette", style: {
                    '--color-picker-column-count': `${this.getColumnCount()}`,
                } }, this.renderSwatches()),
            h("div", { key: '27b19d8906e5f28c86c27476ebe0287b6043eb66', class: "chosen-color-name" }, h("limel-input-field", { key: 'd055b72d5570bcb085b728eb0cf4698b80a44643', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: '051cc6a16e9659aabb01f4b6b9f0b30036d440b4', class: "chosen-color-preview", style: background })),
        ];
    }
    getPalette() {
        if (this.usesCustomPalette()) {
            return (this.palette || []).map((entry) => {
                const normalized = this.normalizeEntry(entry);
                return {
                    name: normalized.name || normalized.value,
                    value: normalized.value,
                    disabled: normalized.disabled,
                };
            });
        }
        // Order default swatches by brightness first, then by color.
        // This gives a more intuitive CSS grid layout logic, and
        // enables adding the `columnCount` prop.
        const swatches = [];
        for (const b of brightnesses) {
            for (const color of colors) {
                swatches.push(createSwatch(color, b));
            }
        }
        return swatches;
    }
    normalizeEntry(entry) {
        if (typeof entry === 'string') {
            return { value: entry };
        }
        return entry;
    }
    usesCustomPalette() {
        var _a;
        return ((_a = this.palette) === null || _a === void 0 ? void 0 : _a.length) > 0;
    }
    getColumnCount() {
        if (this.columnCount > 0) {
            return this.columnCount;
        }
        // Default palette: fixed 20 columns (one per base color)
        if (!this.usesCustomPalette()) {
            return 20;
        }
        // Custom palette: span all provided swatches unless empty
        const palette = this.getPalette();
        return palette.length > 0 ? palette.length : 1;
    }
    static get is() { return "limel-color-picker-palette"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["color-picker-palette.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["color-picker-palette.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Color value that is manually typed by the user"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label of the input field"
                },
                "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": [],
                    "text": "Helper text of the input field"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "helper-text"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "placeholder"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` if a value is required"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "manualInput": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `false` to disallow custom color values to be typed into the input field."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "manual-input",
                "defaultValue": "true"
            },
            "columnCount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the number of columns in the color swatch grid.\nIf not provided, it will default to the number of colors in the palette."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "column-count"
            },
            "palette": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "CustomPalette",
                    "resolved": "(string | CustomColorSwatch)[]",
                    "references": {
                        "CustomPalette": {
                            "location": "import",
                            "path": "./color-picker.types",
                            "id": "src/components/color-picker/color-picker.types.ts::CustomPalette",
                            "referenceLocation": "CustomPalette"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Custom color palette to use instead of Lime palette. Internal prop passed from parent."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits chosen value to the parent component"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
