import dayjs from "dayjs";
import { Host, h } from "@stencil/core";
import { filterData, getLang, tinyMDtoHTML } from "../../utils/helpers";
const ColumnProps = ['class', 'data', 'resizable', 'sortable', 'type', 'width', 'align', 'mapping', 'label'];
export class XDatatableCell {
    constructor() {
        this.value = undefined;
        this.row = undefined;
        this.col = undefined;
    }
    /**
     * On element is mounted
     */
    componentWillLoad() {
        this.valueMapping = this.col.mapping.find(map => map.to === '_');
        this.updateValue();
        dayjs.locale(getLang());
    }
    /**
     * On element is updated
     */
    componentWillUpdate() {
        this.updateValue();
    }
    /**
     * Update the value on changes
     */
    updateValue() {
        const lastValue = this.value;
        this.value = String(this.row[this.col.field]);
        if (lastValue != this.value) {
            this.attrs = this.getExtraAttributes();
        }
        if (this.valueMapping) {
            if (this.valueMapping.from) {
                this.value = this.row[this.valueMapping.from];
            }
            else if (Object.keys(this.valueMapping.value).includes(this.value)) {
                this.value = this.valueMapping.value[this.value];
            }
        }
    }
    /**
     * Compute the column attributes
     */
    getExtraAttributes() {
        const attrs = this.col
            .getAttributeNames()
            .filter(attr => !ColumnProps.includes(attr) && !attr.startsWith('on'))
            .reduce((acc, attr) => {
            acc[attr] = this.col.getAttribute(attr);
            return acc;
        }, {});
        if (this.col.mapping.length > 0) {
            this.col.mapping
                .filter(map => map.to && map.to != '_')
                .forEach(map => {
                var _a;
                if (map.from) {
                    attrs[map.to] = (_a = this.row[map.from]) !== null && _a !== void 0 ? _a : null;
                }
                else if (Object.keys(map.value).includes(this.value)) {
                    attrs[map.to] = map.value[this.value];
                }
            });
        }
        return attrs;
    }
    /**
     * Verify if the column has extra attribute
     */
    has(attr) {
        return Object.keys(this.attrs).length && this.attrs.hasOwnProperty(attr);
    }
    /**
     * Add tooltip to element
     */
    renderWithTooltip(content) {
        if (this.has('description')) {
            return h("x-tooltip", { content: this.attrs.description }, content);
        }
        return content;
    }
    /**
     * Bold type render
     */
    renderBoldType() {
        return h("strong", null, this.value);
    }
    /**
     * Amount type render
     */
    renderAmountType() {
        const value = Number(this.value);
        if (Number.isNaN(value)) {
            return h("div", null, h("span", { class: "muted" }, "\u2022\u2022\u2022"));
        }
        return h("div", null, this.has('prepend') && h("span", { class: "muted" }, this.attrs.prepend), h("span", null, value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")), this.has('append') && h("span", { class: "muted" }, this.attrs.append));
    }
    /**
     * Date type render
     */
    renderDateType() {
        const date = dayjs(this.value);
        if (!date.isValid()) {
            return h("div", null, h("h5", { class: "muted" }, "\u2022\u2022"));
        }
        return h("div", null, h("p", null, date.format('MMM')), h("h5", null, date.format('DD')), h("p", null, date.format('YYYY')));
    }
    /**
     * Number type render
     */
    renderNumberType() {
        return h("div", null, this.has('prepend') && h("span", { class: "muted" }, this.attrs.prepend), this.has('fixed') && !Number.isNaN(this.attrs.fixed) ?
            Number.parseFloat(this.value).toFixed(parseInt(this.attrs.fixed)) :
            this.value, this.has('append') && h("span", { class: "muted" }, this.attrs.append));
    }
    /**
     * Time type render
     */
    renderTimeType() {
        const date = dayjs(this.value);
        if (!date.isValid()) {
            return h("div", null, h("h5", { class: "muted" }, "\u2022\u00A0:\u00A0\u2022"));
        }
        return h("div", null, h("h5", null, date.format('h:mm')), h("p", null, date.format('A')));
    }
    /**
     * Badge type render
     */
    renderBadgeType() {
        return this.renderWithTooltip(h("x-badge", Object.assign({}, this.attrs), this.value));
    }
    /**
     * Icon type render
     */
    renderIconType() {
        return this.renderWithTooltip(h("x-icon", Object.assign({ size: "2rem", name: this.value }, this.attrs)));
    }
    /**
     * Image type render
     */
    renderImageType() {
        return this.renderWithTooltip(h("x-avatar", Object.assign({ size: "2rem", image: this.value }, this.attrs)));
    }
    /**
     * Template type render
     */
    renderTemplateType() {
        return h("div", { class: "cell-template", innerHTML: filterData(this.col.content, this.row) });
    }
    /**
     * Default type render
     */
    renderDefaultType() {
        if (this.has('description')) {
            return h("div", null, h("p", { class: "m-0" }, this.value), h("small", { class: "m-0 muted", innerHTML: tinyMDtoHTML(this.attrs.description, this.row) }));
        }
        return this.value;
    }
    /**
     * Stringify the element
     */
    renderCell() {
        switch (this.col.type) {
            case 'bold': return this.renderBoldType();
            case 'amount': return this.renderAmountType();
            case 'date': return this.renderDateType();
            case 'number': return this.renderNumberType();
            case 'time': return this.renderTimeType();
            case 'badge': return this.renderBadgeType();
            case 'icon': return this.renderIconType();
            case 'image': return this.renderImageType();
            case 'template': return this.renderTemplateType();
            default: return this.renderDefaultType();
        }
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'f273ee2e22606bd8bc77c9f84fb280f68ea5ade6' }, this.renderCell());
    }
    static get is() { return "x-datatable-cell"; }
    static get originalStyleUrls() {
        return {
            "$": ["style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "row": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DatatableRowData",
                    "resolved": "{ [key: string]: any; }",
                    "references": {
                        "DatatableRowData": {
                            "location": "import",
                            "path": "./component",
                            "id": "src/components/x-datatable/component.tsx::DatatableRowData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element data row"
                }
            },
            "col": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "HTMLXDatatableColElement",
                    "resolved": "HTMLXDatatableColElement",
                    "references": {
                        "HTMLXDatatableColElement": {
                            "location": "global",
                            "id": "global::HTMLXDatatableColElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element column"
                }
            }
        };
    }
    static get states() {
        return {
            "value": {}
        };
    }
}
