<!--

    Copyright © 2016-2026 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="flex flex-1 flex-col">
  <div class="flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
    <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3 gap-4 lt-xl:gap-2">
      <mat-form-field class="tb-widget-title tb-appearance-transparent">
        <input [disabled]="isReadOnly" matInput required maxlength="255"
               [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
               placeholder="{{ 'widget.widget-title' | translate }}"/>
      </mat-form-field>
      <mat-form-field class="tb-appearance-transparent">
        <mat-select [disabled]="isReadOnly" placeholder="{{ 'widget.type' | translate }}"
                    [(ngModel)]="widget.type" (ngModelChange)="widgetTypeChanged()">
          @for (type of allWidgetTypes; track type) {
            <mat-option [value]="type">
              {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
      <span class="flex-1"></span>
      <button mat-button class="lt-md:!hidden" [disabled]="!iframeWidgetEditModeInited"
              (click)="applyWidgetScript()"
              matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
              matTooltipPosition="below">
        <mat-icon>play_arrow</mat-icon>
        <span translate>action.run</span>
      </button>
      <button mat-raised-button
              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
              (click)="undoWidget()"
              matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
              matTooltipPosition="below">
        <mat-icon>undo</mat-icon>
        <span translate>action.undo</span>
      </button>
      @if (!isReadOnly) {
        <button mat-raised-button
                class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
                (click)="saveWidget()"
                [tb-circular-progress]="saveWidgetPending"
                matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
                matTooltipPosition="below">
          <mat-icon>save</mat-icon>
          <span translate>action.save</span>
        </button>
      }
      <button mat-raised-button
              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
              (click)="saveWidgetAs()"
              [tb-circular-progress]="saveWidgetAsPending"
              matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
              matTooltipPosition="below">
        <mat-icon>save_as</mat-icon>
        <span translate>action.saveAs</span>
      </button>
      <button mat-button
              class="lt-lg:!hidden"
              (click)="fullscreen = !fullscreen"
              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
              matTooltipPosition="below">
        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
        <span translate>widget.toggle-fullscreen</span>
      </button>
      <button mat-icon-button class="lt-md:!hidden gt-md:!hidden"
              (click)="fullscreen = !fullscreen"
              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
              matTooltipPosition="below">
        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
      </button>
      <button mat-icon-button class="gt-md:!hidden"
              [matMenuTriggerFor]="widgetEditMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #widgetEditMenu="matMenu" xPosition="before">
        <button mat-menu-item
                [disabled]="!iframeWidgetEditModeInited"
                (click)="applyWidgetScript()">
          <mat-icon>play_arrow</mat-icon>
          <span translate>action.run</span>
        </button>
        <button mat-menu-item
                [disabled]="(isLoading$ | async) || undoDisabled()"
                (click)="undoWidget()">
          <mat-icon>undo</mat-icon>
          <span translate>action.undo</span>
        </button>
        @if (!isReadOnly) {
          <button mat-menu-item
                  [disabled]="(isLoading$ | async) || saveDisabled()"
                  (click)="saveWidget()">
            <mat-icon>save</mat-icon>
            <span translate>action.save</span>
          </button>
        }
        <button mat-menu-item
                [disabled]="(isLoading$ | async) || saveAsDisabled()"
                (click)="saveWidgetAs()">
          <mat-icon>save_as</mat-icon>
          <span translate>action.saveAs</span>
        </button>
      </mat-menu>
    </mat-toolbar>
    <div class="flex-1" style="position: relative;">
      <div class="tb-editor tb-absolute-fill">
        <div #topPanel class="tb-split tb-split-vertical">
          <div #topLeftPanel class="tb-split tb-content">
            <mat-tab-group mat-stretch-tabs="false" selectedIndex="1" dynamicHeight="true" style="width: 100%; height: 100%;">
              <mat-tab label="{{ 'widget.resources' | translate }}">
                <div class="tb-resize-container" style="background-color: #fff;">
                  <div class="mat-padding">
                    @for (resource of widget.resources; track resource; let i = $index) {
                      <div class="flex flex-1 flex-row items-center justify-start" style="max-height: 40px;"
                           >
                        <tb-resource-autocomplete class="mat-block resource-field flex-1"
                                                  hideRequiredMarker required
                                                  subscriptSizing="dynamic"
                                                  [allowAutocomplete]="resource.isModule"
                                                  [(ngModel)]="resource.url"
                                                  (ngModelChange)="isDirty = true"
                                                  placeholder="{{ 'widget.resource-url' | translate }}">
                        </tb-resource-autocomplete>
                        <mat-checkbox [(ngModel)]="resource.isModule"
                                      (ngModelChange)="isDirty = true">
                          {{ 'widget.resource-is-extension' | translate }}
                        </mat-checkbox>
                        <button mat-icon-button color="primary"
                                [disabled]="isLoading$ | async"
                                (click)="removeResource(i)"
                                matTooltip="{{'widget.remove-resource' | translate}}"
                                matTooltipPosition="above">
                          <mat-icon>close</mat-icon>
                        </button>
                      </div>
                    }
                    <button mat-raised-button color="primary"
                            style="margin-top: 8px;"
                            [disabled]="isLoading$ | async"
                            (click)="addResource()"
                            matTooltip="{{'widget.add-resource' | translate}}"
                            matTooltipPosition="above">
                      <span translate>action.add</span>
                    </button>
                  </div>
                </div>
              </mat-tab>
              <mat-tab label="{{ 'widget.html' | translate }}">
                <div class="tb-resize-container" tb-fullscreen [fullscreen]="htmlFullscreen">
                  <div class="tb-editor-area-title-panel">
                    <button mat-button (click)="beautifyHtml()">
                      {{ 'widget.tidy' | translate }}
                    </button>
                    <button mat-icon-button class="tb-mat-32"
                            (click)="htmlFullscreen = !htmlFullscreen"
                            matTooltip="{{(htmlFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                            matTooltipPosition="above">
                      <mat-icon>{{ htmlFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
                    </button>
                  </div>
                  <div #htmlInput></div>
                </div>
              </mat-tab>
              <mat-tab label="{{ 'widget.css' | translate }}">
                <div class="tb-resize-container" tb-fullscreen [fullscreen]="cssFullscreen">
                  <div class="tb-editor-area-title-panel">
                    <button mat-button (click)="beautifyCss()">
                      {{ 'widget.tidy' | translate }}
                    </button>
                    <button mat-icon-button class="tb-mat-32"
                            (click)="cssFullscreen = !cssFullscreen"
                            matTooltip="{{(cssFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                            matTooltipPosition="above">
                      <mat-icon>{{ cssFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
                    </button>
                  </div>
                  <div #cssInput></div>
                </div>
              </mat-tab>
            </mat-tab-group>
          </div>
          <div #topRightPanel class="tb-split tb-content">
            <mat-tab-group mat-stretch-tabs="false" dynamicHeight="true" style="width: 100%; height: 100%;">
              <mat-tab label="{{ 'widget.settings-form' | translate }}">
                <div class="tb-resize-container" style="background-color: #fff;">
                  <tb-dynamic-form-properties
                    importExport
                    [exportFileName]="(widget.widgetName || 'widget') + '-settings-form'"
                    [(ngModel)]="widget.settingsForm"
                    (ngModelChange)="settingsFormUpdated()"
                    noBorder fillHeight>
                  </tb-dynamic-form-properties>
                </div>
              </mat-tab>
              <mat-tab label="{{ 'widget.data-key-settings-form' | translate }}">
                <div class="tb-resize-container" style="background-color: #fff;">
                  <tb-dynamic-form-properties
                    importExport
                    [exportFileName]="(widget.widgetName || 'widget') + '-data-key-settings-form'"
                    [(ngModel)]="widget.dataKeySettingsForm"
                    (ngModelChange)="dataKeySettingsFormUpdated()"
                    noBorder fillHeight>
                  </tb-dynamic-form-properties>
                </div>
              </mat-tab>
              <mat-tab [aria-labelledby]="widget.type !== widgetTypes.timeseries ? 'hidden': ''" label="{{ 'widget.latest-data-key-settings-form' | translate }}">
                <div class="tb-resize-container" style="background-color: #fff;">
                  <tb-dynamic-form-properties
                    importExport
                    [exportFileName]="(widget.widgetName || 'widget') + '-latest-data-key-settings-form'"
                    [(ngModel)]="widget.latestDataKeySettingsForm"
                    (ngModelChange)="latestDataKeySettingsFormUpdated()"
                    noBorder fillHeight>
                  </tb-dynamic-form-properties>
                </div>
              </mat-tab>
              <mat-tab label="{{ 'widget.widget-settings' | translate }}">
                <div class="tb-resize-container" style="background-color: #fff;">
                  <div class="mat-padding">
                    <tb-gallery-image-input class="flex-1" label="{{'widget.image-preview' | translate}}"
                                            [(ngModel)]="widget.image"
                                            (ngModelChange)="isDirty = true" >
                    </tb-gallery-image-input>
                    <tb-string-items-list
                      label="{{ 'widget.tags' | translate }}"
                      appearance="outline"
                      [(ngModel)]="widget.tags"
                      (ngModelChange)="isDirty = true">
                    </tb-string-items-list>
                    <div class="flex flex-col gap-4" style="padding-bottom: 16px;">
                      <mat-slide-toggle class="mat-block"
                                        [(ngModel)]="widget.scada"
                                        (ngModelChange)="isDirty = true">
                        {{ 'widget.scada' | translate }}
                      </mat-slide-toggle>
                      <mat-slide-toggle class="mat-block"
                                        [(ngModel)]="widget.deprecated"
                                        (ngModelChange)="isDirty = true">
                        {{ 'widget.deprecated' | translate }}
                      </mat-slide-toggle>
                    </div>
                    <mat-form-field class="mat-block" appearance="outline">
                      <mat-label translate>widget.settings-form-selector</mat-label>
                      <input matInput
                             [(ngModel)]="widget.settingsDirective"
                             (ngModelChange)="isDirty = true"/>
                    </mat-form-field>
                    <mat-form-field class="mat-block" appearance="outline">
                      <mat-label translate>widget.data-key-settings-form-selector</mat-label>
                      <input matInput
                             [(ngModel)]="widget.dataKeySettingsDirective"
                             (ngModelChange)="isDirty = true"/>
                    </mat-form-field>
                    @if (widget.type === widgetTypes.timeseries) {
                      <mat-form-field class="mat-block" appearance="outline">
                        <mat-label translate>widget.latest-data-key-settings-form-selector</mat-label>
                        <input matInput
                               [(ngModel)]="widget.latestDataKeySettingsDirective"
                               (ngModelChange)="isDirty = true"/>
                      </mat-form-field>
                    }
                    <mat-slide-toggle class="mat-block" style="padding-bottom: 16px;"
                                      [(ngModel)]="widget.hasBasicMode"
                                      (ngModelChange)="isDirty = true">
                      {{ 'widget.has-basic-mode' | translate }}
                    </mat-slide-toggle>
                    @if (widget.hasBasicMode) {
                      <mat-form-field class="mat-block" appearance="outline">
                        <mat-label translate>widget.basic-mode-form-selector</mat-label>
                        <input matInput
                               [(ngModel)]="widget.basicModeDirective"
                               (ngModelChange)="isDirty = true"/>
                      </mat-form-field>
                    }
                    <mat-form-field class="mat-block" appearance="outline">
                      <mat-label translate>widget.description</mat-label>
                      <textarea matInput #descriptionInput
                                [(ngModel)]="widget.description"
                                (ngModelChange)="isDirty = true"
                                cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1" maxlength="1024"></textarea>
                      <mat-hint align="end">{{descriptionInput.value?.length || 0}}/1024</mat-hint>
                    </mat-form-field>
                  </div>
                </div>
              </mat-tab>
            </mat-tab-group>
          </div>
        </div>
        <div #bottomPanel class="tb-split tb-split-vertical">
          <div #javascriptPanel class="tb-split tb-content" tb-toast toastTarget="javascriptPanel">
            <div class="tb-resize-container" tb-fullscreen [fullscreen]="javascriptFullscreen">
              <div class="tb-editor-area-title-panel">
                <label translate>widget.javascript</label>
                <button mat-icon-button class="tb-mat-32"
                        #editModulesButton
                        (click)="editControllerScriptModules($event, editModulesButton)"
                        matTooltip="{{'js-func.modules' | translate}}"
                        matTooltipPosition="above">
                  <tb-icon color="primary" matButtonIcon>mdi:application-braces-outline</tb-icon>
                </button>
                <button mat-button (click)="beautifyJs()">
                  {{ 'widget.tidy' | translate }}
                </button>
                <span tb-help-popup="widget/editor/widget_js_fn" tb-help-popup-placement="top" [tb-help-popup-style]="{maxWidth: '1200px'}"></span>
                <button mat-icon-button class="tb-mat-32"
                        (click)="javascriptFullscreen = !javascriptFullscreen"
                        matTooltip="{{(javascriptFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                        matTooltipPosition="above">
                  <mat-icon>{{ javascriptFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
                </button>
              </div>
              <div #javascriptInput></div>
            </div>
          </div>
          <div #framePanel class="tb-split tb-content" style="overflow-y: hidden; position: relative;">
            @if (!iframeWidgetEditModeInited) {
              <div class="mat-content tb-progress-cover flex flex-1 flex-col items-center justify-center"
                   >
                <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
              </div>
            }
            <div tb-fullscreen [fullscreen]="iFrameFullscreen" style="width: 100%; height: 100%;">
              <iframe #widgetIFrame style="border: 0;" height="100%" width="100%"></iframe>
              <div style="position: absolute; top: 10px; left: 10px; bottom: initial;">
                <button mat-icon-button
                        class="tb-fullscreen-button-style"
                        (click)="iFrameFullscreen = !iFrameFullscreen"
                        matTooltip="{{(iFrameFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                        matTooltipPosition="above">
                  <mat-icon>{{ iFrameFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
