var __decorate=this&&this.__decorate||function(e,t,o,i){var r,a=arguments.length,l=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(a<3?r(l):a>3?r(t,o,l):r(t,o))||l);return a>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement as e,html as t,css as o}from"lit";import{customElement as i,property as r}from"lit/decorators.js";import{InputType as a}from"@openremote/or-mwc-components/or-mwc-input";import{Utilities as l}from"../utils";import{i18next as n,translate as s}from"@openremote/or-translate";import{project as c,modal as p,exporter as u}from"./flow-editor";let TopBar=class extends s(n)(e){static get styles(){return o`
        :host{
            display: flex;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -5px;
            line-height: var(--topbar-height);
            z-index: 150;
        }
        .button{
            padding: 0 25px 0 25px;
            cursor: pointer;
        }
        .button:hover{
            background: #fafafa;
        }
        .button:active{
            background: whitesmoke;
        }
        .debug.button{
            background: yellow;
        }
        .title{
            margin: 0 15px 0 15px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .right{ 
            margin-left: auto;
        }`}firstUpdated(){c.addListener("unsavedstateset",()=>{this.requestUpdate()})}render(){return t`
        <span class="title">${n.t("flowEditor")}</span>
        <a class="button" @click="${()=>{c.unsavedState?p.confirmation(()=>{c.clear(!0)},"New project"):c.clear(!0)}}">New</a>
        <a class="button" @click="${this.save}">${n.t("save")} <i>${l.ellipsis(c.existingFlowRuleName)}</i>${c.unsavedState&&-1!==c.existingFlowRuleId?"*":""}</a>
        ${-1===c.existingFlowRuleId?null:t`<a @click="${this.showSaveAsDialog}" class="button">Save as...</a>`}
        <a class="button" @click="${this.showRuleBrowser}">Open</a>
        <a class="button right" @click="${()=>{this.application.nodePanel.drawer.toggle()}}"><or-icon icon="menu"></or-icon></a>
        `}save(){-1===c.existingFlowRuleId?this.showSaveAsDialog():u.exportAsExisting(c.existingFlowRuleId,c.toNodeCollection(c.existingFlowRuleName,c.existingFlowRuleDesc))}showRuleBrowser(){p.element.content=t`<rule-browser @ruleloaded="${()=>p.element.close()}"></rule-browser>`,p.element.header="Select a Flow rule",p.element.open()}showSaveAsDialog(){let e="",o="";p.element.content=t`
            <div style="display: flex; flex-direction: column; width: auto; justify-content: space-between; align-items: stretch;">
            <or-mwc-input style="margin-bottom: 16px; width:100%;" required type="text" label="${n.t("name","Name")}"
            @or-mwc-input-changed="${t=>{e=t.detail.value}}"
            ></or-mwc-input>
            <or-mwc-input style="margin-bottom: 16px; width:100%;" fullwidth type="textarea" label="${n.t("description","Description")}"
            @or-mwc-input-changed="${e=>{o=e.detail.value}}"
            ></or-mwc-input>
            <div>
                <or-mwc-input style="text-align: left; margin-right: 10px" type="${a.BUTTON}" label="${n.t("cancel","Cancel")}" @or-mwc-input-changed="${p.element.close}"></or-mwc-input>
                <or-mwc-input style="text-align: right" type="${a.BUTTON}" unelevated label="${n.t("save","Save")}" @or-mwc-input-changed="${()=>{e&&(u.exportAsNew(c.toNodeCollection(e,o)),p.element.close())}}"></or-mwc-input>
            </div>
            </div>
        `,p.element.header="Save project",p.element.open()}};__decorate([r({attribute:!1})],TopBar.prototype,"application",void 0),TopBar=__decorate([i("top-bar")],TopBar);export{TopBar};