@use '@angular/material' as mat;
@use '@observability/ui/styles/theme' as theme;
@use '@observability/ui/styles/mixins' as mixins;
@use '@observability/ui/styles/variables' as variables;

:host {
  @include mixins.flex-column($justify: flex-start, $align: stretch);

  height: 100%;
  position: relative;

  dag {
    flex: 1;
    outline: none;
  }
}

.toolbar {
  @include mixins.flex-row($justify: flex-start, $align: center);

  .dag-controls {
    @include mat.elevation(1);
    @include mixins.border-radius;
    @include mixins.flex-row($justify: flex-start, $align: center);

    width: fit-content;
    padding: variables.$space-xxs;

    button {
      @include mixins.flex-column;
      @include mixins.button-reset;
      @include mixins.border-radius;
      @include mixins.font-color(secondary);

      padding: variables.$space-xxs;

      mat-icon {
        @include mixins.icon-size(20px);

        color: inherit;
      }

      span {
        @include mixins.font-style($style: caption);

        color: inherit;
      }

      &[disabled] {
        @include mixins.font-color(disabled);

        cursor: not-allowed;
      }
    }

    button + button {
      margin-left: variables.$space-xs;
    }
  }

  .error {
    @include mat.elevation(6);
    @include mixins.font-color($color: primary, $theme: dark);
    @include mixins.flex-row($justify: flex-start, $align: center);

    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px 10px 32px;

    background: variables.$gray-900;

    &--action {
      margin-left: variables.$space-sm;

      mat-icon {
        @include mixins.icon-size($size: 24px);
      }
    }
  }
}

dag {
  .component {
    @include mixins.border-radius;
    @include mixins.flex-row($justify: flex-start, $align: center);
    @include mixins.size($width: 350px, $max-width: 350px, $height: 110px, $max-height: 110px);

    position: relative;
    background: white;
    padding: variables.$space-sm;
    border: 1px solid variables.$gray-500;

    &--icon {
      @include mixins.font-color(secondary);
    }

    &--name {
      font-weight: 500;
      max-width: calc(100% - 32px) !important;
      font-size: 16px;
    }

    &--view {
      @include mixins.flex-row;
      @include mixins.font-color(secondary);

      top: 4px;
      right: 4px;
      position: absolute;

      mat-icon {
        @include mixins.icon-size(24px);
      }
    }

    &.selected {
      @include mixins.mat-color($property: 'color');
      @include mixins.mat-color($property: 'border-color');
    }

    &.DATASET {
      border-width: 6px;
      border-style: double;
    }

    &.SERVER {
      border-style: dashed;
    }
  }
}

.component-selector {
  @include mixins.flex-column;
  @include mixins.border-radius;
  @include mixins.size($width: 100%, $min-width: 250px, $max-width: 350px, $max-height: 400px);

  background: white;
  padding-bottom: variables.$space-xxs;

  .bottom-buttons {
    border-top: variables.$border;
    width: 100%;
    padding: variables.$space-xs;
    @include mixins.flex-row($align: center, $justify: space-between);
  }

  &--filter {
    width: 100%;

    ::ng-deep {
      .mat-form-field-wrapper {
        padding-bottom: variables.$space-xxs;

        .mat-form-field-flex {
          align-items: center;
          padding: 0 variables.$space-xs;
          border-radius: unset;
        }

        .mat-form-field-underline {
          bottom: variables.$space-xxs;
        }
      }
    }
  }

  &--options-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    min-height: calc(48px * 3);

    &--option {
      @include mixins.button-reset;
      @include mixins.flex-row($align: center, $justify: flex-start);

      width: 100%;
      min-height: 48px;
      cursor: pointer;
      padding: variables.$space-xxs variables.$space-xs;

      &-tag {
        @include mixins.font-style($style: caption, $color: secondary);
      }

      //&:hover {
      //  background-color: variables.$gray-200;
      //}
    }

    .disabled {
      @include mixins.font-color(disabled);

      cursor: not-allowed;
      background-color: variables.$gray-200;
    }

    &.loading {
      @include mixins.flex-column($justify: center, $align: center);

      mat-progress-spinner {
        margin: auto;
      }
    }
  }
}
