import { h } from "@stencil/core";
import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
import "../../../../../casino-tournaments-ingame-list/dist/types/index";
import { TournamentState } from "../../../../../../../../libs/common/src/types/casino/tournaments";
import { getDevice, getTimeCountInterval } from "../../utils/utils";
import PrizeSvg from "../../assets/prize.svg";
import BellSvg from "../../assets/bell.svg";
import DotSvg from "../../assets/dot.svg";
import { translate } from "../../utils/locale.utils";
export class CasinoTournamentsIngameEntrance {
    constructor() {
        this.device = getDevice() === 'PC' ? 'Desktop' : 'Mobile';
        this.mbSource = undefined;
        this.clientStyling = undefined;
        this.translationUrl = undefined;
        this.clientStylingUrl = undefined;
        this.cmsEndpoint = undefined;
        this.endpoint = undefined;
        this.theme = 'Dark';
        this.session = undefined;
        this.filter = 'Unstarted|Running';
        this.language = 'en';
        this.currency = 'EUR';
        this.startTimeAfter = undefined;
        this.tournamentId = undefined;
        this.currentGameId = '';
        this.limit = '20';
        this.isTournamentHidden = true;
        this.tournaments = [];
        this.currentTournament = null;
        this.enrolledTournamentCount = 0;
        this.hasNewInfo = false;
        this.hasNewTournament = false;
        this.playerRankInfo = null;
        this.totalRank = undefined;
        this.timeCountInterval = 1;
        this.timeStart = null;
        this.isLeaderboardLoaded = false;
    }
    onEntranceClick() {
        if (this.hasNewTournament) {
            this.reloadTournamentsEvent.emit();
        }
        this.reloadTournamentsEvent.emit({ type: this.hasNewTournament ? 'reloadTournaments' : 'resetLeftPosition' });
        this.isTournamentHidden = false;
    }
    backToHomeHandler() {
        this.isTournamentHidden = true;
        this.hasNewInfo = false;
        this.hasNewTournament = false;
        this.isLeaderboardLoaded = false;
        this.resetStatusAfterTournamentChanged();
        this.enrolledTournamentCount = this.tournaments.filter(t => t.playerEnrolled).length;
    }
    resetStatusAfterTournamentChanged() {
        this.totalRank = 0;
        this.playerRankInfo = null;
        this.timeCountInterval = 1;
    }
    initTournamentsData() {
        var _a, _b, _c;
        this.enrolledTournamentCount = (_a = this.tournaments) === null || _a === void 0 ? void 0 : _a.filter(tournament => {
            return tournament.playerEnrolled && ['Running', 'Unstarted'].includes(tournament.state);
        }).length;
        this.resetStatusAfterTournamentChanged();
        this.currentTournament = ((_b = this.tournaments) === null || _b === void 0 ? void 0 : _b.length) ? this.tournaments[0] : null;
        this.currentTournament && this.getCurrentTournamentRankInfo();
        if (!this.currentTournament || ((_c = this.currentTournament) === null || _c === void 0 ? void 0 : _c.state) === 'Unstarted') {
            this.isLeaderboardLoaded = true;
        }
    }
    leaderboardLoadedHandler(event) {
        var _a, _b, _c;
        this.playerRankInfo = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.item;
        this.totalRank = event.detail.totalRank || ((_c = (_b = this.currentTournament) === null || _b === void 0 ? void 0 : _b.overview) === null || _c === void 0 ? void 0 : _c.participants);
        this.isLeaderboardLoaded = true;
    }
    switchToNext() {
        if (this.tournaments.length <= 1) {
            clearTimeout(this.timerId);
            return;
        }
        this.reloadTournamentsEvent.emit();
    }
    tournamentsEventHandler(event) {
        switch (event.detail.type) {
            case 'InitTournaments':
                this.tournaments = event.detail.tournaments;
                this.initTournamentsData();
                break;
            case 'NewTournament':
                this.hasNewTournament = true;
                break;
        }
    }
    onTournamentUpdate(event) {
        var _a, _b;
        if (event.detail.tournament.id !== ((_a = this.currentTournament) === null || _a === void 0 ? void 0 : _a.id)) {
            return;
        }
        this.currentTournament = event.detail.tournament;
        this.getCurrentTournamentRankInfo();
        if (!this.currentTournament || ((_b = this.currentTournament) === null || _b === void 0 ? void 0 : _b.state) === 'Unstarted') {
            this.isLeaderboardLoaded = true;
        }
    }
    startTimeCounter() {
        this.timerId && clearTimeout(this.timerId);
        this.timerId = setTimeout(() => {
            var _a;
            const timeDiff = getTimeCountInterval(this.timeStart);
            this.timeCountInterval = timeDiff.timeCounterInterval;
            if (this.timeCountInterval === 1 && timeDiff.timeLeft <= 1) {
                switch ((_a = this.currentTournament) === null || _a === void 0 ? void 0 : _a.state) {
                    case TournamentState.Unstarted:
                        this.timeStart = this.currentTournament.startTime;
                        break;
                    default:
                        this.isTournamentHidden && this.switchToNext();
                }
            }
            else {
                this.startTimeCounter();
            }
        }, 1000 * this.timeCountInterval);
    }
    getCurrentTournamentRankInfo() {
        if (!this.currentTournament) {
            return;
        }
        switch (this.currentTournament.state) {
            case TournamentState.Ongoing:
                this.timeStart = this.currentTournament.endTime;
                break;
            case TournamentState.Unstarted:
                this.timeStart = this.currentTournament.startTime;
                break;
        }
        this.startTimeCounter();
    }
    render() {
        var _a, _b, _c, _d;
        const item = this.currentTournament;
        return h("div", { key: '5cc9ac865b344d7f40d3618b7095df18e816ea13', class: `OverlayWrapper IngameEntranceWrapper
    ${this.isLeaderboardLoaded ? 'LeaderboardLoaded' : ''}
    ${this.isTournamentHidden ? 'ButtonMode' : 'ListMode'}  ${this.device === 'PC' ? 'Desktop' : 'Mobile'} FixedView`, ref: (el) => (this.stylingContainer = el) }, h("div", { key: '815ecb7371d1ce565db21ac4b4e15a65fd17396b', class: `OverlayButton ${!this.isTournamentHidden ? 'Hidden' : ''}`, onClick: this.onEntranceClick.bind(this) }, h("div", { key: '27991da7d344356564a69f16eb2d76d4f3b20ec5', class: 'EntranceIcon', innerHTML: PrizeSvg }), h("span", { key: '934010eb52886d3d6857c0eb7df3f561be728666', class: 'TournamentsStatsInfo' }, ((_a = this.playerRankInfo) === null || _a === void 0 ? void 0 : _a.rank) || '-', " / ", (((_b = this.currentTournament) === null || _b === void 0 ? void 0 : _b.state) === TournamentState.Ongoing
            ? this.totalRank : (_d = (_c = this.currentTournament) === null || _c === void 0 ? void 0 : _c.overview) === null || _d === void 0 ? void 0 : _d.participants) || '-'), this.currentTournament && this.isTournamentHidden &&
            h("div", { key: 'f43048352666466f0d034c43b4d3e9da0ff9d6db', class: 'Timer' }, h("casino-tournaments-ingame-state", { key: '95d4f55bbdf6ff28efd3e61f5d12ef9766312263', state: item.state, language: this.language, "tournament-id": item.id, "mb-source": this.mbSource, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "start-time": item.startTime, "end-time": item.endTime })), (this.enrolledTournamentCount > 0 || this.hasNewTournament || this.hasNewInfo) &&
            h("div", { key: '355b018d95a4280c89f7561a6dbc18ca8ed8618a', class: 'Notification' }, h("div", { key: '0d668bdb5a45ece2ac4cd86799b48c55ed1c0ead', class: 'Icons' }, (!this.hasNewTournament && this.enrolledTournamentCount > 0)
                && h("span", { key: 'a103cea225886185c4b48055ee836009ef1dba00', class: 'Enrolled' }, this.enrolledTournamentCount), this.hasNewTournament && h("div", { key: '66e94c125ba252abb13fecdff4aa24f5b8fb067a', class: 'NewIcon' }, " ", translate("new", this.language), " "), this.hasNewInfo && h("div", { key: '9ffeca2ffae3fe490180f91f1ed7c033f05450f4', innerHTML: BellSvg, class: 'BellIcon Hidden' }), this.hasNewInfo && h("div", { key: '2a27b206ed310f3ad15afa456d872c71e340da5a', innerHTML: DotSvg, class: 'DotIcon Hidden' })))), h("div", { key: '12bd878a9eecad5c4a85e2e3f2c994c11ce5ba15', class: `IngameContainer Tournaments ${this.isTournamentHidden ? 'Invisible' : ''}` }, h("casino-tournaments-ingame-list", { key: 'f2c1aff47fc6987a1bd6974f0659f9ba3335ab03', theme: this.theme, filter: this.filter, startTimeAfter: this.startTimeAfter, "tournament-id": this.tournamentId, limit: this.limit, currency: this.currency, session: this.session, "current-game-id": this.currentGameId, "mb-source": this.mbSource, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "cms-endpoint": this.cmsEndpoint, endpoint: this.endpoint })));
    }
    handleClientStylingChange(newValue, oldValue) {
        if (newValue != oldValue) {
            setClientStyling(this.stylingContainer, this.clientStyling);
        }
    }
    handleClientStylingUrlChange(newValue, oldValue) {
        if (newValue != oldValue) {
            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
        }
    }
    handleMbSourceChange(newValue, oldValue) {
        if (newValue != oldValue) {
            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
        }
    }
    componentDidLoad() {
        if (this.stylingContainer) {
            if (this.mbSource)
                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
            if (this.clientStyling)
                setClientStyling(this.stylingContainer, this.clientStyling);
            if (this.clientStylingUrl)
                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
        }
    }
    disconnectedCallback() {
        this.stylingSubscription && this.stylingSubscription.unsubscribe();
    }
    static get is() { return "casino-tournaments-ingame-entrance"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["casino-tournaments-ingame-entrance.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["casino-tournaments-ingame-entrance.css"]
        };
    }
    static get properties() {
        return {
            "mbSource": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "mb-source",
                "reflect": true
            },
            "clientStyling": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "client-styling",
                "reflect": true
            },
            "translationUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "translation-url",
                "reflect": true
            },
            "clientStylingUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "client-styling-url",
                "reflect": true
            },
            "cmsEndpoint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "cms-endpoint",
                "reflect": true
            },
            "endpoint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The NWA endpoint"
                },
                "attribute": "endpoint",
                "reflect": true
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The style that widget shows, available value: Dark, Light\nDefault: Dark"
                },
                "attribute": "theme",
                "reflect": true,
                "defaultValue": "'Dark'"
            },
            "session": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The NWA session for the logged-in user"
                },
                "attribute": "session",
                "reflect": true
            },
            "filter": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The NWA session for the logged-in user"
                },
                "attribute": "filter",
                "reflect": true,
                "defaultValue": "'Unstarted|Running'"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Language of the widget"
                },
                "attribute": "language",
                "reflect": true,
                "defaultValue": "'en'"
            },
            "currency": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Currency of the widget"
                },
                "attribute": "currency",
                "reflect": true,
                "defaultValue": "'EUR'"
            },
            "startTimeAfter": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Time Filter"
                },
                "attribute": "start-time-after",
                "reflect": true
            },
            "tournamentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Selected Tournament ID"
                },
                "attribute": "tournament-id",
                "reflect": true
            },
            "currentGameId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The ID of current playing game"
                },
                "attribute": "current-game-id",
                "reflect": true,
                "defaultValue": "''"
            },
            "limit": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "limit",
                "reflect": true,
                "defaultValue": "'20'"
            }
        };
    }
    static get states() {
        return {
            "isTournamentHidden": {},
            "tournaments": {},
            "currentTournament": {},
            "enrolledTournamentCount": {},
            "hasNewInfo": {},
            "hasNewTournament": {},
            "playerRankInfo": {},
            "totalRank": {},
            "timeCountInterval": {},
            "timeStart": {},
            "isLeaderboardLoaded": {}
        };
    }
    static get events() {
        return [{
                "method": "reloadTournamentsEvent",
                "name": "pthReloadTournaments",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "clientStyling",
                "methodName": "handleClientStylingChange"
            }, {
                "propName": "clientStylingUrl",
                "methodName": "handleClientStylingUrlChange"
            }, {
                "propName": "mbSource",
                "methodName": "handleMbSourceChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "backToHome",
                "method": "backToHomeHandler",
                "target": "body",
                "capture": false,
                "passive": false
            }, {
                "name": "leaderboardLoaded",
                "method": "leaderboardLoadedHandler",
                "target": "body",
                "capture": false,
                "passive": false
            }, {
                "name": "tournamentsEvent",
                "method": "tournamentsEventHandler",
                "target": "body",
                "capture": false,
                "passive": false
            }, {
                "name": "tournamentUpdate",
                "method": "onTournamentUpdate",
                "target": "body",
                "capture": false,
                "passive": false
            }];
    }
}
