/*!
 * Built by Revolist OU ❤️
 */
import { h, Host } from "@stencil/core";
import throttle from "lodash/throttle";
import { TMP_SELECTION_BG_CLASS } from "../../utils/consts";
import { getCell, styleByCellProps } from "../overlay/selection.utils";
/**
 * Temporary range selection component. Shows temporary range selection.
 */
export class RevogrFocus {
    constructor() {
        this.onChange = throttle((e) => this.doChange(e), 300);
    }
    doChange(e) {
        e === null || e === void 0 ? void 0 : e.scrollIntoView({
            block: 'nearest',
            inline: 'nearest',
        });
    }
    componentDidRender() {
        if (this.el) {
            this.onChange(this.el);
        }
    }
    render() {
        const data = this.selectionStore.get('tempRange');
        const type = this.selectionStore.get('tempRangeType');
        if (!data) {
            return;
        }
        let directionY = 'bottom';
        let derectionX = 'right';
        const range = this.getRange();
        if (!range) {
            return;
        }
        if (data.y < range.y) {
            directionY = 'top';
        }
        if (data.x < range.x) {
            derectionX = 'left';
        }
        const directionClass = `${derectionX} ${directionY}`;
        const cell = getCell(data, this.dimensionRow.state, this.dimensionCol.state);
        const styles = styleByCellProps(cell);
        const props = {
            class: {
                [TMP_SELECTION_BG_CLASS]: true,
                [type || '']: true,
            },
            style: styles,
            hidden: false
        };
        return (h(Host, Object.assign({}, props), h("div", { class: directionClass, ref: (e) => (this.el = e) })));
    }
    getRange() {
        const range = this.selectionStore.get('range');
        if (range) {
            return range;
        }
        const focus = this.selectionStore.get('focus');
        if (!focus) {
            return null;
        }
        return Object.assign(Object.assign({}, focus), { x1: focus.x, y1: focus.y });
    }
    static get is() { return "revogr-temp-range"; }
    static get originalStyleUrls() {
        return {
            "$": ["revogr-temp-range-style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["revogr-temp-range-style.css"]
        };
    }
    static get properties() {
        return {
            "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": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Selection store, shows current selection and focus"
                },
                "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": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Dimension row store"
                },
                "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": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Dimension column store"
                },
                "getter": false,
                "setter": false
            }
        };
    }
}
