<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>

<c8y-time-context
  #timeContext
  (contextChange)="onTimeContextChange($event)"
  [changedDateContext]="timeProps"
  [timeContext]="(settings$ | async)?.timeContext"
  [enableAutoAggregation]="true"
  [timePickerConfig]="TIME_PICKER_CONFIG"
></c8y-time-context>

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form"
>
  <c8y-workspace-config
    [updatedConfig]="config"
    [silent]="(settings$ | async)?.hideWorkspaceConfig"
    (onConfigurationChange)="onConfigurationChange($event)"
  ></c8y-workspace-config>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'right'"
  [priority]="-5000"
  itemClass="pull-right"
>
  <button
    class="btn btn-link"
    [attr.aria-label]="'Full screen' | translate"
    [tooltip]="
      ((inFullScreen$ | async)
        ? fullScreenToggleTooltipText.exit
        : fullScreenToggleTooltipText.enter
      ) | translate
    "
    placement="left"
    container="body"
    type="button"
    [delay]="500"
    (click)="toggleFullscreen()"
    data-cy="datapoint-explorer--full-screen"
  >
    <i
      [c8yIcon]="(inFullScreen$ | async) ? 'compress' : 'expand'"
      aria-hidden="true"
    ></i>
    <span class="visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline">
      {{
        ((inFullScreen$ | async)
          ? fullScreenToggleTooltipText.exit
          : fullScreenToggleTooltipText.enter
        ) | translate
      }}
    </span>
  </button>
</c8y-action-bar-item>

@if (!(settings$ | async)?.hideExportSelector) {
  <c8y-action-bar-item [placement]="'right'">
    <c8y-datapoints-export-selector
      [exportConfig]="exportConfig"
      [containerClass]="'d-contents'"
    ></c8y-datapoints-export-selector>
  </c8y-action-bar-item>
}

@if (!(settings$ | async)?.hideWidgetActions) {
  @if (contextAsset) {
    <c8y-action-bar-item
      [placement]="'more'"
      [priority]="-2000"
    >
      <button
        class="btn btn-link"
        title="{{ 'Send as widget to dashboard' | translate }}"
        type="button"
        data-cy="widgets-dashboard--copy-dashboard"
        (click)="sendAsWidgetToDashboard()"
        [disabled]="config?.datapoints?.length === 0 || !canAddReport"
      >
        <i
          c8yIcon="th"
          aria-hidden="true"
        ></i>
        <span>{{ 'Send as widget to dashboard' | translate }}</span>
      </button>
    </c8y-action-bar-item>
  } @else {
    <c8y-action-bar-item
      [placement]="'more'"
      [priority]="-2000"
    >
      <button
        title="{{ 'Send as widget to report' | translate }}"
        type="button"
        data-cy="widgets-dashboard--copy-dashboard"
        (click)="sendAsWidgetToReport()"
        [disabled]="config?.datapoints?.length === 0 || !canAddReport"
      >
        <i
          c8yIcon="c8y-reports"
          aria-hidden="true"
        ></i>
        <span>{{ 'Send as widget to report' | translate }}</span>
      </button>
    </c8y-action-bar-item>

    <c8y-action-bar-item
      [placement]="'more'"
      [priority]="-2000"
    >
      <button
        title="{{ 'Create a new report with widget' | translate }}"
        type="button"
        data-cy="widgets-dashboard--copy-dashboard"
        (click)="createNewReportWithWidget()"
        [disabled]="config?.datapoints?.length === 0 || !canAddReport"
      >
        <i
          c8yIcon="c8y-reports"
          aria-hidden="true"
        ></i>
        <span>{{ 'Create a new report with widget' | translate }}</span>
      </button>
    </c8y-action-bar-item>
  }
}

<c8y-resizable-grid
  class="content-fullpage"
  [leftColumnWidth]="'calc(100% - 360px)'"
  [collapseThreshold]="360"
  [trackId]="'datapoint-explorer'"
>
  <div
    class="d-col gap-16 inner-scroll"
    left-pane
  >
    <c8y-charts
      class="flex-grow data-point-explorer"
      style="min-height: 340px"
      #chart
      [config]="config"
      [alerts]="alerts"
      [chartViewContext]="chartViewContext"
      (updateAlarmsAndEvents)="updateAlarmsAndEvents($event)"
      (configChangeOnZoomOut)="onSliderZoom($event)"
      (datapointOutOfSync)="handleDatapointOutOfSync($event)"
      (datapointBackInSync)="handleDatapointBackInSync($event)"
      (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"
      (isMarkedAreaEnabled)="isMarkedAreaEnabled = $event"
      (updateActiveDatapoints)="updateActiveDatapoints($event)"
      (updateAggregatedSliderDatapoint)="updateAggregatedSliderDatapoint($event)"
    ></c8y-charts>
    <form
      class="flex-shrink p-16 p-r-16 p-relative"
      [class.bg-level-1]="showSettings"
      [class.p-b-0]="!showSettings"
      style="z-index: 1"
      [formGroup]="formGroup"
    >
      <button
        class="legend form-block center btn-clean m-b-0 m-t-0"
        aria-controls="chart-settings-panel"
        [attr.aria-expanded]="showSettings"
        (click)="showSettings = !showSettings; triggerResize()"
      >
        <i
          class="m-r-4"
          [c8yIcon]="'combo-chart'"
          aria-hidden="true"
        ></i>
        <span>
          {{ 'Display settings' | translate }}
        </span>
        <i
          class="m-l-4"
          [c8yIcon]="showSettings ? 'chevron-up' : 'chevron-down'"
          aria-hidden="true"
        ></i>
      </button>
      <div
        class="collapse bg-level-1"
        id="chart-settings-panel"
        [collapse]="!showSettings"
        [isAnimated]="true"
      >
        <div class="bg-level-1 responsive-grid-table-wrapper--600">
          <div
            class="responsive-grid-table responsive-grid-table--padded responsive-grid-table__body"
          >
            <div class="col-5 d-col a-s-start p-b-0">
              <fieldset class="c8y-fieldset form-group-sm m-t-md-0 p-b-8">
                <legend>{{ 'Alarms & events' | translate }}</legend>
                <label
                  class="c8y-checkbox"
                  [title]="'Show vertical line when alarm occurs' | translate"
                >
                  <input
                    name="displayMarkedLine"
                    type="checkbox"
                    formControlName="displayMarkedLine"
                  />
                  <span></span>
                  <span translate>Show vertical line on every occurrence</span>
                </label>

                <label
                  class="c8y-checkbox"
                  [title]="'Show icon when alarm or event occurs' | translate"
                >
                  <input
                    name="displayMarkedPoint"
                    type="checkbox"
                    formControlName="displayMarkedPoint"
                  />
                  <span></span>
                  <span>
                    {{
                      'Show icon when triggered`When alarms and events occur the icon will be shown`'
                        | translate
                    }}
                  </span>
                  @if (alarmsOrEventsHaveNoMatchingDps) {
                    <button
                      class="btn-dot m-l-4"
                      [attr.aria-label]="
                        'Some alarms or events have no matching data points. No icons will be shown for them.'
                          | translate
                      "
                      [popover]="
                        'Some alarms or events have no matching data points. No icons will be shown for them.'
                          | translate
                      "
                      triggers="focus"
                      container="body"
                      type="button"
                      (click)="$event.stopPropagation()"
                    >
                      <i
                        class="text-warning"
                        c8yIcon="warning"
                      ></i>
                    </button>
                  }
                </label>
              </fieldset>

              <fieldset class="c8y-fieldset form-group-sm m-t-md-0 p-b-8">
                <legend>{{ 'Chart' | translate }}</legend>
                <label
                  class="c8y-checkbox"
                  [title]="'Show labels and units' | translate"
                >
                  <input
                    name="showLabelAndUnit"
                    type="checkbox"
                    formControlName="showLabelAndUnit"
                  />
                  <span></span>
                  <span translate>Display labels and units on Y-axis</span>
                </label>
                <label
                  class="c8y-checkbox"
                  [title]="'Show slider' | translate"
                >
                  <input
                    name="showSlider"
                    type="checkbox"
                    formControlName="showSlider"
                  />
                  <span></span>
                  <span translate>Show slider</span>
                </label>
                <label
                  class="c8y-checkbox"
                  [title]="'Show smooth lines' | translate"
                >
                  <input
                    name="smoothLines"
                    type="checkbox"
                    formControlName="smoothLines"
                  />
                  <span></span>
                  <span translate>Show smooth lines</span>
                </label>
              </fieldset>
            </div>
            <div class="col-7 a-s-start p-b-0">
              <fieldset class="c8y-fieldset form-group-sm m-t-md-0 p-b-8">
                <legend>{{ 'Axis' | translate }}</legend>
                <label
                  class="c8y-checkbox"
                  [title]="'Y-axis helper lines' | translate"
                >
                  <input
                    name="yAxisSplitLines"
                    type="checkbox"
                    formControlName="yAxisSplitLines"
                  />
                  <span></span>
                  <span translate>Y-axis helper lines</span>
                </label>
                <label
                  class="c8y-checkbox"
                  [title]="'X-axis helper lines' | translate"
                >
                  <input
                    name="xAxisSplitLines"
                    type="checkbox"
                    formControlName="xAxisSplitLines"
                  />
                  <span></span>
                  <span translate>X-axis helper lines</span>
                </label>
                <label
                  class="c8y-checkbox"
                  [title]="'Merge matching data points into single axis' | translate"
                >
                  <input
                    name="mergeMatchingDatapoints"
                    type="checkbox"
                    formControlName="mergeMatchingDatapoints"
                  />
                  <span></span>
                  <span translate>Merge matching data points into single axis</span>
                  <button
                    class="btn-help"
                    [attr.aria-label]="
                      'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'
                        | translate
                    "
                    [popover]="
                      'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'
                        | translate
                    "
                    triggers="focus"
                    container="body"
                    type="button"
                    (click)="$event.stopPropagation()"
                  ></button>
                </label>
                <label
                  class="c8y-checkbox"
                  [title]="'Force merge all data points into single axis' | translate"
                >
                  <input
                    name="forceMergeDatapoints"
                    type="checkbox"
                    formControlName="forceMergeDatapoints"
                  />
                  <span></span>
                  <span translate>Force merge all data points into single axis</span>
                  <button
                    class="btn-help"
                    [attr.aria-label]="
                      'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\'s recommended to use this option for data points with similar values.'
                        | translate
                    "
                    [popover]="
                      'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\'s recommended to use this option for data points with similar values.'
                        | translate
                    "
                    triggers="focus"
                    container="body"
                    type="button"
                    (click)="$event.stopPropagation()"
                  ></button>
                </label>
                <label
                  class="c8y-checkbox"
                  [title]="'Set Y-axis start to 0' | translate"
                >
                  <input
                    name="setYaxisStartToZero"
                    type="checkbox"
                    formControlName="setYaxisStartToZero"
                  />
                  <span></span>
                  <span translate>Set Y-axis start to 0</span>
                  <button
                    class="btn-help"
                    [attr.aria-label]="
                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'
                        | translate
                    "
                    [popover]="
                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'
                        | translate
                    "
                    triggers="focus"
                    container="body"
                    type="button"
                    (click)="$event.stopPropagation()"
                  ></button>
                </label>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div
    class="inner-scroll bg-level-1"
    right-pane
  >
    <form
      class="bg-inherit"
      [formGroup]="formGroup"
    >
      <c8y-datapoint-selection-list
        class="bg-inherit separator-top d-block"
        name="datapoints"
        [minActiveCount]="0"
        [defaultFormOptions]="datapointSelectDefaultFormOptions"
        [config]="{ contextAsset: contextAsset }"
        formControlName="datapoints"
        [allowDragAndDrop]="true"
      ></c8y-datapoint-selection-list>

      <c8y-alarm-event-selection-list
        class="bg-inherit"
        name="alarms"
        formControlName="alarms"
        [timelineType]="'ALARM'"
        [datapoints]="config.datapoints"
      ></c8y-alarm-event-selection-list>

      <c8y-alarm-event-selection-list
        class="bg-inherit"
        name="events"
        formControlName="events"
        [timelineType]="'EVENT'"
        [datapoints]="config.datapoints"
      ></c8y-alarm-event-selection-list>

      <div class="p-l-16 p-r-16 form-group p-b-16">
        <label
          [title]="'Number of decimal places' | translate"
          translate
        >
          Number of decimal places
        </label>
        <input
          class="form-control"
          name="numberOfDecimalPlaces"
          type="number"
          formControlName="numberOfDecimalPlaces"
          [placeholder]="'e.g. {{ example }}' | translate: { example: 1 }"
        />
        <c8y-messages
          [show]="
            formGroup.controls?.numberOfDecimalPlaces?.touched &&
            formGroup?.controls?.numberOfDecimalPlaces?.errors
          "
        ></c8y-messages>
      </div>
    </form>
  </div>
</c8y-resizable-grid>