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 { getTimeDifferFormNow, getDevice } 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.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.timeDiscount = '';
        this.timeStart = null;
        this.device = undefined;
        this.isLeaderboardLoaded = false;
    }
    onEntranceClick() {
        if (this.hasNewTournament) {
            this.reloadTournamentsEvent.emit();
        }
        this.reloadTournamentsEvent.emit({ type: this.hasNewTournament ? 'reloadTournaments' : 'resetLeftPosition' });
        this.isTournamentHidden = false;
    }
    backToHomeHandler() {
        this.isLeaderboardLoaded = false;
        this.isTournamentHidden = true;
        this.hasNewInfo = false;
        this.hasNewTournament = false;
        this.totalRank = 0;
        this.playerRankInfo = null;
        this.enrolledTournamentCount = this.tournaments.filter(t => t.playerEnrolled).length;
    }
    resetDataLoadStatus() {
        this.isLeaderboardLoaded = false;
    }
    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.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() {
        this.playerRankInfo = null;
        this.resetDataLoadStatus();
        this.totalRank = 0;
        this.currentTournament = null;
        if (this.tournaments.length <= 1) {
            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;
        }
    }
    startTimeCounter() {
        this.timerId && clearTimeout(this.timerId);
        this.timerId = setTimeout(() => {
            var _a;
            this.timeDiscount = getTimeDifferFormNow(this.timeStart);
            if (this.timeDiscount === '00:00:00:00' || this.timeDiscount === '00:00:00') {
                switch ((_a = this.currentTournament) === null || _a === void 0 ? void 0 : _a.state) {
                    case TournamentState.Unstarted:
                        this.timeStart = this.currentTournament.startTime;
                        this.timeDiscount = getTimeDifferFormNow(this.timeStart);
                        break;
                    default:
                        this.switchToNext();
                }
            }
            else {
                this.startTimeCounter();
            }
        }, 1000);
    }
    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;
        return h("div", { key: 'c92a20d8053600aabd940d4e0116f5a8520f444d', class: `OverlayWrapper IngameEntranceWrapper
    ${this.isLeaderboardLoaded ? 'LeaderboardLoaded' : ''}
    ${this.isTournamentHidden ? 'ButtonMode' : 'ListMode'} ${this.device}`, ref: (el) => (this.stylingContainer = el) }, h("div", { key: '643edba8419a5916382a8b9565e74c23fe687582', class: `OverlayButton ${!this.isTournamentHidden ? 'Hidden' : ''}`, onClick: this.onEntranceClick.bind(this) }, h("div", { key: '2b32098952cb3f8acb7e16f8ef92ceacd831ebee', class: 'EntranceIcon', innerHTML: PrizeSvg }), h("span", { key: 'e92a2792ff6136a49a7a901ed576359e2890c9d0', 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.timeDiscount && h("div", { key: '7debaef3a7b14d273c4c94c7266040bb341f75f9', class: 'Timer' }, h("span", { key: 'b066e11e44927367a73846ff45cd460dfc5fb73d' }, this.timeDiscount, "  ")), (this.enrolledTournamentCount > 0 || this.hasNewTournament || this.hasNewInfo) &&
            h("div", { key: 'a152fe35b1b20b86ad2c49dc6e1b12d2abea250f', class: 'Notification' }, h("div", { key: 'cccc6da9569fbb3abac52b6f947a815300423620', class: 'Icons' }, (!this.hasNewTournament && this.enrolledTournamentCount > 0)
                && h("span", { key: '132fb900e14e23ec87219064b0ead143ef541422', class: 'Enrolled' }, this.enrolledTournamentCount), this.hasNewTournament && h("div", { key: '4de188126be9760cbbfbbfd641d3011fc6ef0ca2', class: 'NewIcon' }, " ", translate("new", this.language), " "), this.hasNewInfo && h("div", { key: '0181cf3b907a7c728c928950aac0c1bab4bcb852', innerHTML: BellSvg, class: 'BellIcon Hidden' }), this.hasNewInfo && h("div", { key: 'a071399f3a46aa47c8b76093ee13bc08283fafda', innerHTML: DotSvg, class: 'DotIcon Hidden' })))), h("div", { key: '711dab522b20db87fdeae765f30712bb92c56758', class: `IngameContainer Tournaments ${this.isTournamentHidden ? 'Invisible' : ''}` }, h("casino-tournaments-ingame-list", { key: 'f94004be3ab1a1feaaf83e1d97346947aa2668b5', 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);
        }
        this.device = getDevice() === 'PC' ? 'Desktop' : 'Mobile';
    }
    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": {},
            "timeDiscount": {},
            "timeStart": {},
            "device": {},
            "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
            }];
    }
}
