import { h } from "@stencil/core";
/**
 * ColorPicker 颜色选择器组件
 * 用于颜色选择，支持多种格式
 */
export class ColorPicker {
    el;
    /**
     * 绑定值
     */
    modelValue;
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 颜色格式
     */
    colorFormat = 'hex';
    /**
     * 是否显示透明度
     * @default false
     */
    showAlpha = false;
    /**
     * 预定义颜色
     */
    predefine;
    isOpen = false;
    currentColor = '#409EFF';
    hue = 210; // 色相值 0-360
    saturation = 100; // 饱和度 0-100
    value = 100; // 明度 0-100
    /**
     * 值改变事件
     */
    hbChange;
    /**
     * 激活时触发
     */
    hbActiveChange;
    componentDidLoad() {
        if (this.modelValue) {
            this.currentColor = this.modelValue;
            this.updateHSVFromColor(this.modelValue);
        }
        else {
            this.updateHSVFromColor(this.currentColor);
        }
        document.addEventListener('click', this.handleDocumentClick);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleDocumentClick);
    }
    handleDocumentClick = (e) => {
        if (!this.isOpen)
            return;
        const target = e.target;
        if (!this.el.contains(target)) {
            this.isOpen = false;
        }
    };
    handleValueChange() {
        if (this.modelValue) {
            this.currentColor = this.modelValue;
            this.updateHSVFromColor(this.modelValue);
        }
    }
    handleTriggerClick = () => {
        if (this.disabled)
            return;
        this.isOpen = !this.isOpen;
    };
    handleColorSelect = (color) => {
        this.currentColor = color;
        this.modelValue = color;
        this.hbChange.emit(color);
        this.hbActiveChange.emit(color);
    };
    handleSaturationClick = (e) => {
        const target = e.currentTarget;
        const rect = target.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        // X 轴代表饱和度 (0-100%)
        this.saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));
        // Y 轴代表明度 (0-100%，从上到下)
        this.value = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));
        const hex = this.hsvToHex(this.hue, this.saturation, this.value);
        this.handleColorSelect(hex);
    };
    handleHueClick = (e) => {
        const target = e.currentTarget;
        const rect = target.getBoundingClientRect();
        const x = e.clientX - rect.left;
        // 色相值 0-360
        this.hue = Math.max(0, Math.min(360, (x / rect.width) * 360));
        const hex = this.hsvToHex(this.hue, this.saturation, this.value);
        this.handleColorSelect(hex);
    };
    handleInputChange = (e) => {
        const target = e.target;
        const value = target.value;
        // 验证 hex 颜色格式
        if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {
            this.handleColorSelect(value);
        }
    };
    handleRgbInputChange = (index, value) => {
        const rgb = this.hexToRgb(this.currentColor);
        if (rgb) {
            const num = parseInt(value, 10);
            if (!isNaN(num) && num >= 0 && num <= 255) {
                if (index === 0)
                    rgb.r = num;
                else if (index === 1)
                    rgb.g = num;
                else if (index === 2)
                    rgb.b = num;
                const hex = `#${[rgb.r, rgb.g, rgb.b].map(x => {
                    const hex = x.toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                }).join('')}`;
                this.handleColorSelect(hex);
            }
        }
    };
    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }
    // RGB 转 HSV
    rgbToHsv(r, g, b) {
        r = r / 255;
        g = g / 255;
        b = b / 255;
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        const diff = max - min;
        let h = 0;
        if (diff !== 0) {
            if (max === r) {
                h = ((g - b) / diff) % 6;
            }
            else if (max === g) {
                h = (b - r) / diff + 2;
            }
            else {
                h = (r - g) / diff + 4;
            }
        }
        h = Math.round(h * 60);
        if (h < 0)
            h += 360;
        const s = max === 0 ? 0 : Math.round((diff / max) * 100);
        const v = Math.round(max * 100);
        return { h, s, v };
    }
    // HSV 转 RGB
    hsvToRgb(h, s, v) {
        s = s / 100;
        v = v / 100;
        const c = v * s;
        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
        const m = v - c;
        let r = 0, g = 0, b = 0;
        if (h >= 0 && h < 60) {
            r = c;
            g = x;
            b = 0;
        }
        else if (h >= 60 && h < 120) {
            r = x;
            g = c;
            b = 0;
        }
        else if (h >= 120 && h < 180) {
            r = 0;
            g = c;
            b = x;
        }
        else if (h >= 180 && h < 240) {
            r = 0;
            g = x;
            b = c;
        }
        else if (h >= 240 && h < 300) {
            r = x;
            g = 0;
            b = c;
        }
        else if (h >= 300 && h < 360) {
            r = c;
            g = 0;
            b = x;
        }
        return {
            r: Math.round((r + m) * 255),
            g: Math.round((g + m) * 255),
            b: Math.round((b + m) * 255)
        };
    }
    // HSV 转 Hex
    hsvToHex(h, s, v) {
        const rgb = this.hsvToRgb(h, s, v);
        return `#${[rgb.r, rgb.g, rgb.b].map(x => {
            const hex = x.toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        }).join('')}`;
    }
    // 从颜色值更新 HSV
    updateHSVFromColor(color) {
        const rgb = this.hexToRgb(color);
        if (rgb) {
            const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);
            this.hue = hsv.h;
            this.saturation = hsv.s;
            this.value = hsv.v;
        }
    }
    render() {
        const rgb = this.hexToRgb(this.currentColor);
        const predefinedColors = this.predefine || [
            '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
            '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
        ];
        // 根据当前色相生成饱和度面板的背景色
        const hueColor = this.hsvToHex(this.hue, 100, 100);
        return (h("div", { key: '3a91756cec6b901dbd98049c6dea3f13cb0125b9', class: {
                'hb-color-picker': true,
                'hb-color-picker--open': this.isOpen,
                'hb-color-picker--disabled': this.disabled,
            } }, h("div", { key: '60fcf367b48d726dec4626cade99ae39c10c83f7', class: "hb-color-picker__trigger", onClick: this.handleTriggerClick }, h("div", { key: '9b9f4c7f1444d76f1d6df1c480949572affb4a71', class: "hb-color-picker__color", style: { backgroundColor: this.currentColor } }), h("span", { key: 'ddc5c6d1d875012ad46638324b2e9a80eb50d989', class: "hb-color-picker__text" }, this.currentColor)), this.isOpen && (h("div", { key: '4f96c8be969d8b37f0acba6f9ec55d0b0223485d', class: "hb-color-picker__dropdown" }, h("div", { key: '6e754aa587fbe8161315ab3fedfd71ccdf7b9a7e', class: "hb-color-picker__panel" }, h("div", { key: '477dbbe265a0538e3f65f0d3c03dc653cf063982', class: "hb-color-picker__saturation", onClick: this.handleSaturationClick }, h("div", { key: 'eff441602d0795cfb6a05b9470dcec762c47e2a2', class: "hb-color-picker__saturation-bg", style: { backgroundColor: hueColor } }), h("div", { key: '3f3e8c420dbea347c6859f046d0398e1141de926', class: "hb-color-picker__saturation-white" }), h("div", { key: 'e501004e2e2d9f585b48bcc4a90def07c39964c2', class: "hb-color-picker__saturation-black" }), h("div", { key: 'b00cda534203c12195977d0933bd36b1baafab34', class: "hb-color-picker__saturation-pointer", style: {
                left: `${this.saturation}%`,
                top: `${100 - this.value}%`,
            } })), h("div", { key: 'ee86c70a807d70aa292a0208a3a172b35c791325', class: "hb-color-picker__controls" }, h("div", { key: 'd4dda211347b9c3e4ef1dc5e28f5a6a44359a162', class: "hb-color-picker__hue", onClick: this.handleHueClick }, h("div", { key: 'dbab23a4059b6dd2aeada35d7434c79a61860867', class: "hb-color-picker__hue-bar" }), h("div", { key: 'b612775578712beac58a487a23a25c812fb28077', class: "hb-color-picker__hue-pointer", style: {
                left: `${(this.hue / 360) * 100}%`,
            } })), this.showAlpha && (h("div", { key: '1aee2cd74b0cdf27d0afcbd09384ae707a5d7485', class: "hb-color-picker__alpha" }, h("div", { key: 'eba46d362053e05c89a93f34dfb453a8ed2253c7', class: "hb-color-picker__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '60f66da4a79a2eb0ce1c389d65fd30362bbb7c61', class: "hb-color-picker__input" }, h("input", { key: '1411561687211e4ea149421bfaf624c7cdc45ead', type: "text", class: "hb-color-picker__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: 'c24d2df8b8d04fee9eeba4d8de660d14857cdf77', class: "hb-color-picker__input-rgb" }, h("input", { key: 'e4dd71d86bda84168f7342b3cf0a7513f608f0e1', type: "number", min: "0", max: "255", value: rgb.r, onInput: (e) => this.handleRgbInputChange(0, e.target.value) }), h("input", { key: '198c25b1f2fe03bae65b2a6120b226684623a5a1', type: "number", min: "0", max: "255", value: rgb.g, onInput: (e) => this.handleRgbInputChange(1, e.target.value) }), h("input", { key: 'fe0c9273a4d283f3f4bde1b8c258e0adc370b9a6', type: "number", min: "0", max: "255", value: rgb.b, onInput: (e) => this.handleRgbInputChange(2, e.target.value) })))), this.predefine && this.predefine.length > 0 && (h("div", { key: '52b711be9fd4794a42fb0c4747a53df529895932', class: "hb-color-picker__predefine" }, predefinedColors.map((color) => (h("div", { class: {
                'hb-color-picker__predefine-color': true,
                'hb-color-picker__predefine-color--selected': color === this.currentColor,
            }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) }))))))))));
    }
    static get is() { return "hb-color-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["color-picker.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["color-picker.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "colorFormat": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'hsl' | 'hsv' | 'hex' | 'rgb'",
                    "resolved": "\"hex\" | \"hsl\" | \"hsv\" | \"rgb\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u989C\u8272\u683C\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "color-format",
                "reflect": false,
                "defaultValue": "'hex'"
            },
            "showAlpha": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u900F\u660E\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-alpha",
                "reflect": false,
                "defaultValue": "false"
            },
            "predefine": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u9884\u5B9A\u4E49\u989C\u8272"
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "currentColor": {},
            "hue": {},
            "saturation": {},
            "value": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "hbActiveChange",
                "name": "hbActiveChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6FC0\u6D3B\u65F6\u89E6\u53D1"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=ColorPicker.js.map
