import { h } from "@stencil/core";
import { ZButton } from "../internal-component/z-button";
import { ZInput } from "../internal-component/z-input";
import { Icon } from "../internal-component/icon";
import { getContrastColorHelper, useTranslation } from "../../utils/utils";
import { configStore } from "../../store/store";
import { DEFAULT_COLOR } from "../../utils/constant";
const PRESET_COLORS = [
    // shade50
    '#f3e5f5', // Colors.purple.shade50
    '#ede7f6', // Colors.deepPurple.shade50
    '#e3f2fd', // Colors.blue.shade50
    '#e1f5fe', // Colors.lightBlue.shade50
    '#e0f2f1', // Colors.teal.shade50
    '#e8f5e8', // Colors.green.shade50
    '#f9fbe7', // Colors.lime.shade50
    '#fffde7', // Colors.yellow.shade50
    '#fff8e1', // Colors.amber.shade50
    '#fff3e0', // Colors.orange.shade50
    '#fbe9e7', // Colors.deepOrange.shade50
    '#ffebee', // Colors.red.shade50
    // shade100
    '#e1bee7', // Colors.purple.shade100
    '#d1c4e9', // Colors.deepPurple.shade100
    '#bbdefb', // Colors.blue.shade100
    '#b3e5fc', // Colors.lightBlue.shade100
    '#b2dfdb', // Colors.teal.shade100
    '#c8e6c9', // Colors.green.shade100
    '#f0f4c3', // Colors.lime.shade100
    '#fff9c4', // Colors.yellow.shade100
    '#ffecb3', // Colors.amber.shade100
    '#ffe0b2', // Colors.orange.shade100
    '#ffccbc', // Colors.deepOrange.shade100
    '#ffcdd2', // Colors.red.shade100
    // shade200
    '#ce93d8', // Colors.purple.shade200
    '#b39ddb', // Colors.deepPurple.shade200
    '#90caf9', // Colors.blue.shade200
    '#81d4fa', // Colors.lightBlue.shade200
    '#80cbc4', // Colors.teal.shade200
    '#a5d6a7', // Colors.green.shade200
    '#e6ee9c', // Colors.lime.shade200
    '#fff59d', // Colors.yellow.shade200
    '#ffe082', // Colors.amber.shade200
    '#ffcc80', // Colors.orange.shade200
    '#ffab91', // Colors.deepOrange.shade200
    '#ef9a9a', // Colors.red.shade200
    // main colors
    '#9c27b0', // Colors.purple
    '#673ab7', // Colors.deepPurple
    '#2196f3', // Colors.blue
    '#03a9f4', // Colors.lightBlue
    '#009688', // Colors.teal
    '#4caf50', // Colors.green
    '#cddc39', // Colors.lime
    '#ffeb3b', // Colors.yellow
    '#ffc107', // Colors.amber
    '#ff9800', // Colors.orange
    '#ff5722', // Colors.deepOrange
    '#f44336' // Colors.red
];
export class CreateMasterDataDialog {
    open;
    dialogTitle;
    type = 'status';
    initialData;
    loading = false;
    close;
    submitData;
    delete;
    name = '';
    color = DEFAULT_COLOR;
    error = '';
    componentWillLoad() {
        this.updateStateFromInitialData();
    }
    handleInitialDataChange() {
        this.updateStateFromInitialData();
    }
    handleOpenChange(newValue) {
        if (newValue === true) {
            this.updateStateFromInitialData();
        }
    }
    updateStateFromInitialData() {
        if (this.initialData) {
            this.name = this.initialData.name;
            this.color = this.initialData.color;
        }
        else {
            this.name = '';
            this.color = DEFAULT_COLOR;
        }
    }
    handleClose = () => {
        this.close.emit();
    };
    handleSubmit = (e) => {
        e.preventDefault();
        if (!this.name.trim()) {
            this.error = 'Name is required'; // Should use translation
            return;
        }
        this.submitData.emit({ name: this.name, color: this.color });
    };
    handleDelete = () => {
        this.delete.emit();
    };
    render() {
        if (!this.open)
            return null;
        const t = useTranslation();
        const theme = configStore.get('theme');
        return (h("div", { class: "create-master-data-dialog", "data-theme": theme }, h("div", { class: "create-master-data-dialog-wrapper" }, h("div", { class: "create-master-data-dialog-close", onClick: this.handleClose }, h(Icon, { name: "X" })), h("h2", { class: "create-master-data-dialog-title" }, this.initialData ? t('master_data.edit_title', { title: this.dialogTitle }) : t('master_data.create_title', { title: this.dialogTitle })), h("div", null, h("div", { class: "form-group" }, h(ZInput, { label: t('name'), value: this.name, onChange: (val) => {
                this.name = val;
                this.error = '';
            }, error: this.error, placeholder: t('form.enter_name'), maxLength: 24 })), h("div", { class: "form-group" }, h("label", { class: "form-label" }, t('form.select_color')), h("div", { class: "color-picker-grid" }, PRESET_COLORS.map((c) => (h("div", { class: `color-option ${this.color === c ? 'selected' : ''}`, style: { backgroundColor: c }, onClick: () => (this.color = c) })))), h("div", { class: "flex items-center gap-2 mt-2" }, h("input", { type: "color", value: this.color, onInput: (e) => this.color = e.target.value, class: "h-8 w-8 p-0 border-0 rounded cursor-pointer" }), h("span", { class: "text-sm text-gray-500" }, t('click_to_select_color')))), this.name && (h("div", { class: "form-group" }, h("label", { class: "form-label" }, t('example')), h("div", { class: "preview-box", style: {
                backgroundColor: this.color,
                color: getContrastColorHelper(this.color),
            } }, this.name))), h("div", { class: "action-buttons" }, this.initialData ? (h(ZButton, { id: `delete-master-${this.type}-button`, variant: "outlined", label: t('delete'), onClick: this.handleDelete, disabled: this.loading, fullWidth: true })) : (h(ZButton, { id: `cancel-master-${this.type}-button`, variant: "outlined", label: t('cancel'), onClick: this.handleClose, disabled: this.loading, fullWidth: true })), h(ZButton, { id: `save-master-${this.type}-button`, label: t('save'), disabled: !this.name.trim() || this.loading, fullWidth: true, onClick: this.handleSubmit }))))));
    }
    static get is() { return "create-master-data-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["create-master-data-dialog.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["create-master-data-dialog.css"]
        };
    }
    static get properties() {
        return {
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "open"
            },
            "dialogTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dialog-title"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'tag' | 'status'",
                    "resolved": "\"status\" | \"tag\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'status'"
            },
            "initialData": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{ id: string; name: string; color: string }",
                    "resolved": "{ id: string; name: string; color: string; }",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "name": {},
            "color": {},
            "error": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "submitData",
                "name": "submitData",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ name: string; color: string }",
                    "resolved": "{ name: string; color: string; }",
                    "references": {}
                }
            }, {
                "method": "delete",
                "name": "delete",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "initialData",
                "methodName": "handleInitialDataChange"
            }, {
                "propName": "open",
                "methodName": "handleOpenChange"
            }];
    }
}
