"use strict";
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module NavigationAids
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.SheetCard = exports.CardContainer = exports.SheetsModalFrontstage = exports.CardSelectedEvent = void 0;
require("./SheetsModalFrontstage.scss");
const classnames_1 = require("classnames");
const React = require("react");
const core_frontend_1 = require("@itwin/core-frontend");
const appui_abstract_1 = require("@itwin/appui-abstract");
const core_react_1 = require("@itwin/core-react");
const UiFramework_1 = require("../UiFramework");
/** Class for CardSelectedEvent
 * @alpha
 */
class CardSelectedEvent extends appui_abstract_1.UiEvent {
}
exports.CardSelectedEvent = CardSelectedEvent;
/** Modal frontstage displaying sheet information in cards.
 * @alpha
 */
class SheetsModalFrontstage {
    /**
     * Creates a SheetsModalFrontstage
     * @param sheets Collection of sheets available in SheetNavigationAid
     * @param connection IModelConnection to query for sheet ViewState
     */
    constructor(sheets, connection, currentIndex) {
        this.title = UiFramework_1.UiFramework.translate("navigationAid.sheetsModalFrontstage");
        this._cards = [];
        this._searchValue = "";
        /** Updates stage based on search value */
        // istanbul ignore next
        this._handleSearchValueChanged = (value) => {
            this._searchValue = value;
            UiFramework_1.UiFramework.frontstages.updateModalFrontstage();
        };
        this._connection = connection;
        this._currentIndex = currentIndex;
        this._storeSheetsAsCards(sheets);
    }
    /**
     * Gathers card info from available sheets
     * @param sheets SheetData from available sheets
     */
    _storeSheetsAsCards(sheets) {
        sheets.forEach((sheet, index) => {
            this._cards.push({ index, label: sheet.name, iconSpec: "icon-document", viewId: sheet.viewId, isActive: index === this._currentIndex });
        });
    }
    /** Gets set of cards */
    get content() {
        return React.createElement(CardContainer, { cards: this._cards, searchValue: this._searchValue, connection: this._connection });
    }
    /** Gets components to be placed in the app bar */
    get appBarRight() {
        return (React.createElement(core_react_1.SearchBox, { placeholder: core_react_1.UiCore.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
    }
}
exports.SheetsModalFrontstage = SheetsModalFrontstage;
/** Displays cards in SheetModalFrontstage
 * @alpha
 */
class CardContainer extends React.Component {
    /** Get CardSelectedEvent event */
    static get onCardSelectedEvent() { return CardContainer._cardSelectedEvent; }
    /** @internal */
    render() {
        return (React.createElement(core_react_1.ScrollView, { className: this.props.className, style: this.props.style },
            React.createElement(core_react_1.FlexWrapContainer, null, this.props.cards.map((card, _index) => {
                let includeCard = true;
                const iconClassName = (typeof card.iconSpec === "string") ? card.iconSpec : /* istanbul ignore next */ "icon-placeholder";
                if (this.props.searchValue) {
                    includeCard = this.contains(card.label, this.props.searchValue);
                }
                if (includeCard) {
                    return (React.createElement(SheetCard, { key: card.label, label: card.label, index: card.index, iconSpec: iconClassName, isActive: card.isActive, onClick: async () => this._handleCardSelected(card) }));
                }
                return null;
            }))));
    }
    /**
     * Determines if string contains a substring
     * @param valueA The string to search through
     * @param valueB The value to search for
     * @return True if valueB can be found in valueA, false otherwise
     */
    contains(valueA, valueB) {
        if (!valueA || !valueB)
            return false;
        if (valueB.length > valueA.length)
            return false;
        return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;
    }
    /**
     * Updates view with ViewState for selected card.
     * @param card Data about the sheet card selected.
     */
    async _handleCardSelected(card) {
        // istanbul ignore if
        if (core_frontend_1.IModelApp.viewManager && core_frontend_1.IModelApp.viewManager.selectedView) {
            const vp = core_frontend_1.IModelApp.viewManager.selectedView;
            const viewState = await this.props.connection.views.load(card.viewId);
            vp.changeView(viewState);
        }
        card.isActive = true;
        UiFramework_1.UiFramework.frontstages.closeModalFrontstage();
        CardContainer.onCardSelectedEvent.emit({ id: card.viewId, index: card.index });
    }
}
exports.CardContainer = CardContainer;
CardContainer._cardSelectedEvent = new CardSelectedEvent();
/** Displays information about an individual sheet
 * @alpha
 */
class SheetCard extends React.Component {
    constructor(props) {
        super(props);
        this._onClick = () => {
            this.setState({ isActive: true }, () => this.props.onClick());
        };
        this._onMouseDown = () => {
            this.setState({ isPressed: true });
        };
        this._onMouseLeave = () => {
            if (this.state.isPressed)
                this.setState({ isPressed: false });
        };
        this.state = { isActive: this.props.isActive, isPressed: false };
    }
    render() {
        const { label, index, iconSpec } = this.props;
        const className = (0, classnames_1.default)("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
        const iconClassName = (0, classnames_1.default)("icon", (typeof iconSpec === "string") ? iconSpec : /* istanbul ignore next */ "icon-placeholder");
        return (
        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
        React.createElement("div", { className: className, onClick: this._onClick, onMouseDown: this._onMouseDown, onMouseLeave: this._onMouseLeave, role: "button", tabIndex: -1 },
            label,
            React.createElement("div", { className: "sheet-image-container" },
                React.createElement("div", { className: iconClassName })),
            React.createElement("div", { className: "sheet-index" }, index + 1)));
    }
}
exports.SheetCard = SheetCard;
//# sourceMappingURL=SheetsModalFrontstage.js.map