if(!customElements.get("remex-p2p-header")){class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._headers={},this._address=null,this._available=0,this._freeze=0,this._rendered=!1,this.isTelegram="undefined"!=typeof Telegram&&Telegram.WebApp&&Telegram.WebApp.initData}get rendered(){return this._rendered}set rendered(e){this._rendered=e}static get observedAttributes(){return["headers","wallet"]}attributeChangedCallback(e,n,t){if("headers"===e&&(this._headers=JSON.parse(t),this.render().then((e=>0))),"wallet"===e){const e=JSON.parse(t);this._available=e.available,this._freeze=e.freeze,this._address=e.address,this.updateWalletInfo()}}async isConnected(){if(window.auth?.isConnected())return!0;await window.auth.checkUserIsLogged();const e=new Promise(((e,n)=>{if(window.auth.remexAuth)setTimeout((()=>e(window.auth.isConnected())),500);else{const n=setInterval((()=>{window.auth.remexAuth&&(clearInterval(n),
e(window.auth.remexAuth.isConnected()&&window.auth?.user?.token))}),100)}}));return await e}set headers(e){this._headers=e,this.rendered=!1,this.render().then((e=>0))}async connectedCallback(){await this.render()}realtimeSuscriberInit(){new Promise(((e,n)=>{if(void 0!==window.DeepstreamClient)e(!0);else{const t=document.createElement("script");t.tik=setInterval((()=>{void 0!==window.DeepstreamClient&&(clearInterval(t.tik),e(!0))}),100),t.src="/assets/js/ds.min.js",t.async=!0,t.onload=()=>{t.tik&&clearInterval(t.tik),e(!0)},t.onerror=()=>{t.tik&&clearInterval(t.tik),n(!1)},document.head.appendChild(t)}})).then((()=>{if(void 0===window.realtime){const{DeepstreamClient:e}=window.DeepstreamClient;window.realtime={client:new e("dev"==document.querySelector('meta[name="app-env"]')?.getAttribute("content")?"wss://dev.remesita.com/deepstream":"wss://remesita.com/deepstream"),login:()=>new Promise(((e,n)=>{"OPEN"==window.realtime.client.getConnectionState()?e(!0):window.realtime.client.login({
uid:window.auth.user.id},(t=>t?e(!0):n(!1)))}))}}window.realtime.login().then((()=>{if(!this._realTime){const e=document.querySelector('meta[name="app-env"]')?.getAttribute("content"),n=`${e}/wallet/${this._address}`;this._realTime=window.realtime.client.record.getRecord(n),this._realTime.subscribe("balance",(e=>{this._available=Math.min(e.availableBalance,e.totalBalance),this._freeze=e?.freezeBalance??window.wallet.freezeBalance,this.updateWalletInfo(),this.dispatchEvent(new CustomEvent("wallet-refresh",{detail:{available:this._available,freeze:this._freeze,address:this._address},composed:!0,bubbles:!0}))}))}}))})).catch((()=>{}))}async loadScript(e,n){const t="dev"!=document.querySelector('meta[name="app-env"]')?.getAttribute("content"),r=document.querySelector('meta[name="x-cpl"]')?.getAttribute("content")||"1.0.0";return new Promise(((a,i)=>{if(n&&customElements.get(n))a(!0);else{const o=document.createElement("script");n&&(o.tik=setInterval((()=>{
customElements.get(n)&&(clearInterval(o.tik),a(!0))}),100)),o.src=`/cdn/${r}/${t?e.replace(".min.js","").replace(".js",".min.js"):e}`,o.async=!0,o.onload=()=>{o.tik&&clearInterval(o.tik),a(!0)},o.onerror=()=>{o.tik&&clearInterval(o.tik),i(!1)},document.head.appendChild(o)}}))}async refresh(){if(await this.isConnected()&&this._headers.token)try{const e=document.querySelector('meta[name="app-env"]')?.getAttribute("content"),n=await fetch(`https://${"dev"==e?"dev.":""}remesita.com/rest/v1/wallet`,{method:"GET",headers:{"Content-Type":"application/json",Token:this._headers.token}});if(n.ok){const e=await n.json();return this._available=Math.min(e.availableBalance,e.totalBalance),this._freeze=e.freezeBalance,this._address=e.address,this.dispatchEvent(new CustomEvent("wallet-refresh",{detail:{available:this._available,freeze:this._freeze,address:this._address},composed:!0,bubbles:!0})),!0}}catch(e){}return!1}async render(){if(this.rendered)return
;await this.loadScript("microfronts/remex-icon/index.js","remex-icon");const e=await this.isConnected()
;this.shadowRoot.innerHTML=`\n                    <style>  \n                    ${e?`.picture{\n                            width:30px;\n                            height:30px;\n                            border-radius:50%;\n                            background-image:url('${window.auth?.user?.photoURL}');\n                            background-size:cover;\n                            background-repeat:no-repeat;\n                            background-color:#f1f1f1;\n                            border:1px solid #f1f1f1;\n                            background-position:center;\n                        }.pic-name{\n                            display: flex;\n                            flex-direction: row;\n                            gap: 0.8rem;\n                            overflow-y: auto;\n                            align-items: center;\n                            padding: 0.5rem 0.6rem;\n                            border-radius: 4rem;\n                            cursor: pointer;\n                            min-height: 32px;\n                              border: 1px solid transparent;  \n                        }\n                        .pic-name:hover{\n                            background-color: rgba(var(--nav-bg,#005f75), 0.8) !important;\n                            border: 1px solid var(--input-bg,#297083);  \n                            background: linear-gradient(180deg, var(--input-bg,#297083) 1.16%, #56c6e614 51.05%, #a5ecfc69 105.69%);\n                        } .nickname {\n                            background: linear-gradient(276.46deg, var(--text-primary-color,#297083) 1.16%, #00bcd4 51.05%, rgb(182 182 182) 105.69%);\n                            -webkit-background-clip: text;\n                            -webkit-text-fill-color: transparent;\n                            font-family: Mija !important;\n                            font-size: calc(0.8rem + 0.4vw) !important;\n                            cursor: pointer;\n                        }\n                        .wallet{\n                         border: 1px solid transparent;  \n                            cursor:pointer;\n                            display: flex;\n                            flex-direction: row;\n                            gap: 0.8rem;\n                            overflow-y: auto;\n                            align-items: center;\n                            padding: 0.5rem 0.6rem;\n                            border-radius: 4rem;\n                            cursor: pointer;\n                            min-height: 32px;\n                            justify-content: center;\n                            padding-right: 1rem;\n                        }\n                        .wallet:hover{\n                            background-color: rgba(var(--nav-bg,#005f75), 0.8) !important;\n                            border: 1px solid var(--input-bg,#297083);  \n                            background: linear-gradient(180deg, rgba(3, 168, 244, 0.05) 1.16%, #56c6e614 51.05%, #a5ecfc69 105.69%);\n                           \n                        }\n                        .region-right{\n                            display: flex ;\n                            flex-direction: row;\n                            gap: 0.2rem;\n                            align-items: center;\n                        }\n                        .region-right a{\n                            width: 25px;\n                            margin-right: 4px;\n                            border-radius: 50%; \n                              border: 1px solid transparent;  \n                        }\n                         .region-right a:hover{ \n                            background-color: rgba(var(--nav-bg,#005f75), 0.8) !important;\n                            border: 1px solid var(--input-bg,#297083);  \n                            background: linear-gradient(180deg, rgba(3, 168, 244, 0.05) 1.16%, #56c6e614 51.05%, #a5ecfc69 105.69%);\n                         }\n                        @media (max-width: 768px) { \n                            .wallet{\n                                flex-direction: column;\n                                gap: 0rem;\n                                padding-right: 1.2rem;\n                                align-items: end;\n                            }\n                        }`:""}\n                        \n                        .container{\n                            padding:0.1rem;\n                            display: flex ;\n                            flex-direction: row;\n                            gap: 1rem;\n                            overflow-y: auto; \n                            align-items: center;\n                            border-radius: 4rem; \n                            justify-content: space-between;\n                            background: var(--tab-btn-active-bg,#055165);\n                            overflow: hidden;\n                            animation: fadeIn 1s linear;\n                            box-shadow:0px 0px 16px #005f7526;\n                            border:1px solid var(--muted-bg,transparent);\n                            margin-top: var(--header-height,0rem);\n                            \n                        } \n                        @keyframes fadeIn {\n                            0% { opacity: 0; }\n                            100% { opacity: 1; }\n                        }\n                        .container:after {\n                            content: " ";\n                            display: block;\n                            margin: auto;\n                            background: var(--tab-btn-active-bg,#055165);\n                            width: 15px;\n                            height: 15px;\n                            position: absolute;\n                            left: 0;\n                            right: 0;\n                            transform: rotate(45deg);\n                            margin-top:55px;\n                            border-top-left-radius: 50px;\n                            box-shadow:6px 8px 11px #005f7517;\n                             border-bottom: 1px solid var(--muted-bg, transparent);\n                            border-right: 1px solid var(--muted-bg, transparent);\n                        }\n                           \n                        \n                        h5,h6{\n                             padding:0;\n                             margin:0;\n                            color:var(--nav-text,#fff);\n                        } \n                         h6{\n                            font-size:0.6rem;\n                            color:#6ea5a9;\n                        }\n                       \n                        button{\n                            display: inline-block;\n                            font-weight: 400;\n                            line-height: 1.5;\n                            color: #212529;\n                            text-align: center;\n                            text-decoration: none;\n                            vertical-align: middle;\n                            cursor: pointer;\n                            user-select: none;\n                            background-color: transparent;\n                            border: 1px solid transparent;\n                            padding: 0.375rem 0.75rem;\n                            font-size: 1rem;\n                            border-radius: 0.25rem;\n                            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n                            color: #fff;\n                            background-color: #117a8b;\n                             border-color: #10707f;\n                             width: 100%;\n                             border-radius:25px;\n                     }\n                            \n                      button:hover,button:focus,button:active{\n                        background-color: #49c2e4 !important;\n                        border: 1px solid #49c2e4 !important;\n                        -webkit-box-shadow: 0 3px 10px rgba(86, 198, 230, .5);\n                        box-shadow: 0 3px 10px rgba(86, 198, 230, .5);\n                        color: #fff !important;\n                     }\n                    .invite-telegram{\n                        padding: 0.5rem;\n                        text-align: center;\n                        margin-bottom: 0.5rem;\n                    }\n                    .invite-telegram a{\n                        color: var(--text-color,#000);\n                        text-decoration: none;\n                        font-size: 0.7rem; \n                    }\n                    .invite-telegram a span{\n                        background: var(--button-bg-primary, #49c2e4);\n                        color:#fff;\n                        display: inline-block;\n                        padding: 0.15rem 0.5rem;\n                        border-radius: 25px; \n                    } \n    \n                    </style> \n                    ${this.isTelegram?"":'<div class="text-center mt-2 mb-1 invite-telegram">\n                        <a href="https://t.me/RemesitaP2PBot?startapp=announcements"  rounded" target="_blank">Esta plataforma también esta disponible como \n                        <span>MiniApp de Telegram</span></a>\n                    </div>'}\n                    \n                    <div class="container">\n                    ${e?`<div class="pic-name">\n                            <div class="picture"></div> <h5 class="nickname">${(window.auth?.user?.fullName??"").split(" ")[0]}</h5>\n                        </div>\n                         <div class="region-right"><div class="wallet"><remex-icon color="var(--nav-text,#fff)" icon="loading"></remex-icon></div><a href="/p2p/menu" style="padding: 8px;"><remex-icon icon="dotsVertical"></remex-icon></a></div>`:'<div style="width:100%;padding:5px;"><button type="button" onclick="this.dispatchEvent(new CustomEvent(\'forceauth\', {  bubbles: true,  composed: true  }))" class="btn-info">Remesita P2P <remex-icon color="#fff" icon="fingerprint"></remex-icon> Iniciar sesión</button></div>'} \n                    </div>\n                `,
e&&(this.wallet=this.shadowRoot.querySelector(".wallet"),this.shadowRoot.querySelector(".pic-name").addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("profile",{detail:window.auth.user.id,composed:!0,bubbles:!0}))})),this.shadowRoot.querySelector(".wallet").addEventListener("click",(()=>{this.shadowRoot.querySelector(".wallet").innerHTML='<remex-icon  color="var(--nav-text,#fff)" icon="loading"></remex-icon>',this.refresh().then((()=>this.updateWalletInfo()))})),this.shadowRoot.querySelector(".region-right a").addEventListener("click",(e=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("force-navigate",{bubbles:!0,composed:!0,detail:"/p2p/menu"}))})),this._available>0?this.updateWalletInfo():this.refresh().then((()=>this.updateWalletInfo())),this.rendered=!0),this.isTelegram&&Telegram.WebApp.onEvent("viewportChanged",(function(){
Telegram.WebApp.isFullscreen?this.shadowRoot.querySelector(".container").style.marginTop="4rem":this.shadowRoot.querySelector(".container").style.marginTop="0"}))}updateWalletInfo(){this.wallet&&(this.wallet.innerHTML=`<h5><remex-icon icon="wallet" size="0.8rem" color="#ccc"></remex-icon> ${Intl.NumberFormat("es-ES",{style:"currency",currency:"SRM"}).format(this._available)}</h5>\n            <h6><remex-icon icon="snowflake" size="0.8rem" color="#ccc"></remex-icon> ${Intl.NumberFormat("es-ES",{style:"currency",currency:"SRM"}).format(this._freeze)}</h6>`),!this.realtimeSuscribed&&this._address&&(this.realtimeSuscriberInit(),this.realtimeSuscribed=!0)}}customElements.define("remex-p2p-header",e)}