/*---------------------------------------------------------------------------------------------
 * 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
 */
import "./SheetsModalFrontstage.scss";
import classnames from "classnames";
import * as React from "react";
import { IModelApp } from "@itwin/core-frontend";
import { UiEvent } from "@itwin/appui-abstract";
import { FlexWrapContainer, Icon, ScrollView, SearchBox, } from "@itwin/core-react";
import { UiFramework } from "../UiFramework.js";
import { SvgDocument, SvgPlaceholder } from "@itwin/itwinui-icons-react";
import { BeUiEvent } from "@itwin/core-bentley";
/** Class for CardSelectedEvent
 * @alpha
 * @deprecated in 4.13.0. This class should not be used by applications to instantiate objects.
 */
// eslint-disable-next-line @typescript-eslint/no-deprecated
export class CardSelectedEvent extends UiEvent {
}
/** Modal frontstage displaying sheet information in cards.
 * @alpha
 */
export class SheetsModalFrontstage {
    title = UiFramework.translate("navigationAid.sheetsModalFrontstage");
    _cards = [];
    _connection;
    _currentIndex;
    _searchValue = "";
    /**
     * Creates a SheetsModalFrontstage
     * @param sheets Collection of sheets available in SheetNavigationAid
     * @param connection IModelConnection to query for sheet ViewState
     */
    constructor(sheets, connection, currentIndex) {
        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: React.createElement(SvgDocument, null),
                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 (
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        React.createElement(SearchBox, { placeholder: UiFramework.translate("general.search"), onValueChanged: this._handleSearchValueChanged, valueChangedDelay: 250 }));
    }
    /** Updates stage based on search value */
    _handleSearchValueChanged = (value) => {
        this._searchValue = value;
        UiFramework.frontstages.updateModalFrontstage();
    };
}
/** Displays cards in SheetModalFrontstage
 * @alpha
 */
export class CardContainer extends React.Component {
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    static _cardSelectedEvent = new BeUiEvent();
    /** Get CardSelectedEvent event */
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    static get onCardSelectedEvent() {
        return CardContainer._cardSelectedEvent;
    }
    render() {
        return (
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        React.createElement(ScrollView, { className: this.props.className, style: this.props.style },
            React.createElement(FlexWrapContainer, null, this.props.cards.map((card, _index) => {
                let includeCard = true;
                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, 
                        // eslint-disable-next-line @typescript-eslint/no-deprecated
                        iconSpec: card.iconSpec, icon: card.icon, 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) {
        if (IModelApp.viewManager && IModelApp.viewManager.selectedView) {
            const vp = IModelApp.viewManager.selectedView;
            const viewState = await this.props.connection.views.load(card.viewId);
            vp.changeView(viewState);
        }
        card.isActive = true;
        UiFramework.frontstages.closeModalFrontstage();
        CardContainer.onCardSelectedEvent.emit({
            id: card.viewId,
            index: card.index,
        });
    }
}
/** Displays information about an individual sheet
 * @alpha
 */
export class SheetCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isActive: this.props.isActive, isPressed: false };
    }
    _onClick = () => {
        this.setState({ isActive: true }, () => this.props.onClick());
    };
    _onMouseDown = () => {
        this.setState({ isPressed: true });
    };
    _onMouseLeave = () => {
        if (this.state.isPressed)
            this.setState({ isPressed: false });
    };
    render() {
        const { label, index } = this.props;
        const className = classnames("uifw-sheet-card", this.state.isActive && "is-active", this.state.isPressed && "is-pressed");
        const icon = 
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        (this.props.icon ?? this.props.iconSpec) ? (
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        React.createElement(Icon, { iconSpec: this.props.iconSpec })) : (React.createElement(SvgPlaceholder, null));
        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: "icon" }, icon)),
            React.createElement("div", { className: "sheet-index" }, index + 1)));
    }
}
//# sourceMappingURL=SheetsModalFrontstage.js.map