/*!
 * Built by Revolist OU ❤️
 */
import { h, Host, } from "@stencil/core";
import { FOCUS_CLASS } from "../../utils/consts";
import { getCell, styleByCellProps } from "../overlay/selection.utils";
import { getSourceItem } from "../../store/index";
/**
 * Focus component. Shows focus layer around the cell that is currently in focus.
 * @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow
 */
export class RevogrFocus {
    constructor() {
        /**
         * Focus template custom function. Can be used to render custom focus layer.
         */
        this.focusTemplate = null;
        this.activeFocus = null;
    }
    componentDidRender() {
        var _a, _b;
        const currentFocus = this.selectionStore.get('focus');
        if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) &&
            ((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
            return;
        }
        this.activeFocus = currentFocus;
        if (currentFocus && this.el) {
            const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });
            if (!beforeScrollIn.defaultPrevented) {
                this.el.scrollIntoView({
                    block: 'nearest',
                    inline: 'nearest',
                });
            }
            const model = getSourceItem(this.dataStore, currentFocus.y);
            const column = getSourceItem(this.colData, currentFocus.x);
            this.afterFocus.emit({
                model,
                column,
                rowType: this.rowType,
                colType: this.colType,
                rowIndex: currentFocus.y,
                colIndex: currentFocus.x,
            });
        }
    }
    render() {
        var _a;
        const editCell = this.selectionStore.get('edit');
        if (editCell) {
            return;
        }
        const focusCell = this.selectionStore.get('focus');
        if (!focusCell) {
            return;
        }
        const event = this.beforeFocusRender.emit({
            range: Object.assign(Object.assign({}, focusCell), { x1: focusCell.x, y1: focusCell.y }),
            rowType: this.rowType,
            colType: this.colType,
            rowDimension: Object.assign({}, this.dimensionRow.state),
            colDimension: Object.assign({}, this.dimensionCol.state),
        });
        if (event.defaultPrevented) {
            return h("slot", null);
        }
        const { detail } = event;
        const cell = getCell(detail.range, event.detail.rowDimension, event.detail.colDimension);
        const styles = styleByCellProps(cell);
        const extra = (_a = this.focusTemplate) === null || _a === void 0 ? void 0 : _a.call(this, h, detail);
        const props = {
            class: { [FOCUS_CLASS]: true },
            style: styles,
        };
        return (h(Host, Object.assign({}, props), h("slot", null), extra));
    }
    static get is() { return "revogr-focus"; }
    static get originalStyleUrls() {
        return {
            "$": ["revogr-focus-style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["revogr-focus-style.css"]
        };
    }
    static get properties() {
        return {
            "colType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "DimensionCols",
                    "resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\"",
                    "references": {
                        "DimensionCols": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DimensionCols",
                            "referenceLocation": "DimensionCols"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Column type"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "col-type"
            },
            "rowType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "DimensionRows",
                    "resolved": "\"rgRow\" | \"rowPinEnd\" | \"rowPinStart\"",
                    "references": {
                        "DimensionRows": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DimensionRows",
                            "referenceLocation": "DimensionRows"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Row type"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "row-type"
            },
            "selectionStore": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Observable<SelectionStoreState>",
                    "resolved": "{ range: RangeArea | null; tempRange: RangeArea | null; tempRangeType: string | null; focus: Cell | null; edit: EditCellStore | null; lastCell: Cell | null; nextFocus: Cell | null; }",
                    "references": {
                        "Observable": {
                            "location": "import",
                            "path": "../../utils",
                            "id": "src/utils/index.ts::Observable",
                            "referenceLocation": "Observable"
                        },
                        "SelectionStoreState": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::SelectionStoreState",
                            "referenceLocation": "SelectionStoreState"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Selection, range, focus for selection"
                },
                "getter": false,
                "setter": false
            },
            "dimensionRow": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Observable<DimensionSettingsState>",
                    "resolved": "DimensionSettingsState",
                    "references": {
                        "Observable": {
                            "location": "import",
                            "path": "../../utils",
                            "id": "src/utils/index.ts::Observable",
                            "referenceLocation": "Observable"
                        },
                        "DimensionSettingsState": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DimensionSettingsState",
                            "referenceLocation": "DimensionSettingsState"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Dimension settings Y"
                },
                "getter": false,
                "setter": false
            },
            "dimensionCol": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Observable<DimensionSettingsState>",
                    "resolved": "DimensionSettingsState",
                    "references": {
                        "Observable": {
                            "location": "import",
                            "path": "../../utils",
                            "id": "src/utils/index.ts::Observable",
                            "referenceLocation": "Observable"
                        },
                        "DimensionSettingsState": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DimensionSettingsState",
                            "referenceLocation": "DimensionSettingsState"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Dimension settings X"
                },
                "getter": false,
                "setter": false
            },
            "dataStore": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Observable<DSourceState<DataType, DimensionRows>>",
                    "resolved": "\"rgRow\" | \"rowPinEnd\" | \"rowPinStart\" | D | K",
                    "references": {
                        "Observable": {
                            "location": "import",
                            "path": "../../utils",
                            "id": "src/utils/index.ts::Observable",
                            "referenceLocation": "Observable"
                        },
                        "DSourceState": {
                            "location": "import",
                            "path": "@store",
                            "id": "src/store/index.ts::DSourceState",
                            "referenceLocation": "DSourceState"
                        },
                        "DataType": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DataType",
                            "referenceLocation": "DataType"
                        },
                        "DimensionRows": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DimensionRows",
                            "referenceLocation": "DimensionRows"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Data rows source"
                },
                "getter": false,
                "setter": false
            },
            "colData": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Observable<DSourceState<ColumnRegular, DimensionCols>>",
                    "resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\" | ColumnRegular<ColumnProp, DataType<any, ColumnProp>>",
                    "references": {
                        "Observable": {
                            "location": "import",
                            "path": "../../utils",
                            "id": "src/utils/index.ts::Observable",
                            "referenceLocation": "Observable"
                        },
                        "DSourceState": {
                            "location": "import",
                            "path": "@store",
                            "id": "src/store/index.ts::DSourceState",
                            "referenceLocation": "DSourceState"
                        },
                        "ColumnRegular": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::ColumnRegular",
                            "referenceLocation": "ColumnRegular"
                        },
                        "DimensionCols": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::DimensionCols",
                            "referenceLocation": "DimensionCols"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Column source"
                },
                "getter": false,
                "setter": false
            },
            "focusTemplate": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FocusTemplateFunc | null",
                    "resolved": "((createElement: HyperFunc<VNode>, detail: FocusRenderEvent) => any) | null",
                    "references": {
                        "FocusTemplateFunc": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::FocusTemplateFunc",
                            "referenceLocation": "FocusTemplateFunc"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Focus template custom function. Can be used to render custom focus layer."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "null"
            }
        };
    }
    static get events() {
        return [{
                "method": "beforeFocusRender",
                "name": "beforefocusrender",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Before focus render event.\nCan be prevented by event.preventDefault().\nIf preventDefault used slot will be rendered."
                },
                "complexType": {
                    "original": "FocusRenderEvent",
                    "resolved": "FocusRenderEvent",
                    "references": {
                        "FocusRenderEvent": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::FocusRenderEvent",
                            "referenceLocation": "FocusRenderEvent"
                        }
                    }
                }
            }, {
                "method": "beforeScrollIntoView",
                "name": "beforescrollintoview",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Before focus changed verify if it's in view and scroll viewport into this view\nCan be prevented by event.preventDefault()"
                },
                "complexType": {
                    "original": "{ el: HTMLElement }",
                    "resolved": "{ el: HTMLElement; }",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                }
            }, {
                "method": "afterFocus",
                "name": "afterfocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Used to setup properties after focus was rendered"
                },
                "complexType": {
                    "original": "FocusAfterRenderEvent",
                    "resolved": "FocusAfterRenderEvent<DataType<any, ColumnProp>>",
                    "references": {
                        "FocusAfterRenderEvent": {
                            "location": "import",
                            "path": "@type",
                            "id": "src/types/index.ts::FocusAfterRenderEvent",
                            "referenceLocation": "FocusAfterRenderEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
