<app-sidebar (scrolledToBottom)="loadMoreLibraries()">
  <clr-tree>
    <clr-tree-node *ngIf="libraryList" class="search-node">
      <div class="tree-search-wrapper">
        <input
          appStealFocus
          clrInput
          #searchLibTreeInput
          placeholder="Libraries"
          name="input"
          [(ngModel)]="librariesSearch"
          (keyup)="libraryOnFilter()"
          autocomplete="off"
        />
        <clr-icon
          *ngIf="searchLibTreeInput.value.length < 1"
          shape="search"
        ></clr-icon>
        <clr-icon
          *ngIf="searchLibTreeInput.value.length > 0"
          (click)="librariesSearch = ''; libraryOnFilter()"
          shape="times"
        ></clr-icon>
      </div>
    </clr-tree-node>

    <ng-container *ngFor="let library of libraryList">
      <clr-tree-node
        (click)="treeNodeClicked($event, library, libraryList)"
        *ngIf="!library['hidden'] && library['inForeground']"
        [(clrExpanded)]="library['expanded']"
        [clrLoading]="library['loadingTables'] && !library.tables"
        [class.clr-expanded]="library['expanded']"
      >
        <p
          (click)="lib = library.LIBRARYID; libraryOnClick(lib || '', library)"
          class="m-0 cursor-pointer"
        >
          <clr-icon shape="rack-server"></clr-icon>
          {{ library.LIBRARYNAME }}
        </p>

        <clr-tree-node *ngIf="library['tables']" class="search-node">
          <div class="tree-search-wrapper">
            <input
              appStealFocus
              clrInput
              #searchTreeInput
              placeholder="Tables"
              name="input"
              [(ngModel)]="library['searchString']"
              (keyup)="treeOnFilter(library, 'tables.TABLENAME')"
              autocomplete="off"
            />
            <clr-icon
              *ngIf="searchTreeInput.value.length < 1"
              shape="search"
            ></clr-icon>
            <clr-icon
              *ngIf="searchTreeInput.value.length > 0"
              (click)="
                searchTreeInput.value = '';
                library['searchString'] = '';
                treeOnFilter(library, 'tables.TABLENAME')
              "
              shape="times"
            ></clr-icon>
          </div>
        </clr-tree-node>

        <clr-tree-node
          (click)="treeNodeClicked($event, libTable, library['tables'])"
          *ngFor="let libTable of library['tables']"
          [(clrExpanded)]="libTable['expanded']"
          [clrLoading]="libTable['loadingColumns'] && !libTable.columns"
          [class.clr-expanded]="libTable['expanded']"
        >
          <p
            (click)="tableOnClick(libTable.TABLEURI, libTable, library)"
            [id]="libTable.TABLEURI"
            class="m-0 cursor-pointer"
          >
            <clr-icon shape="table"></clr-icon>
            {{ libTable.TABLENAME }}
          </p>

          <clr-tree-node *ngIf="libTable['columns']" class="search-node">
            <div class="tree-search-wrapper">
              <input
                appStealFocus
                clrInput
                #searchTreeInput
                placeholder="Columns"
                name="input"
                [(ngModel)]="libTable['searchString']"
                (keyup)="treeOnFilter(libTable, 'columns.COLNAME')"
                autocomplete="off"
              />
              <clr-icon
                *ngIf="searchTreeInput.value.length < 1"
                shape="search"
              ></clr-icon>
              <clr-icon
                *ngIf="searchTreeInput.value.length > 0"
                (click)="
                  searchTreeInput.value = '';
                  libTable['searchString'] = '';
                  treeOnFilter(libTable, 'columns.COLNAME')
                "
                shape="times"
              ></clr-icon>
            </div>
          </clr-tree-node>

          <clr-tree-node *ngFor="let libColumn of libTable['columns']">
            <button
              (click)="columnOnClick(libColumn, library, libTable)"
              class="clr-treenode-link"
              [class.column-active]="libColumnActive(libColumn.COLURI)"
            >
              <clr-icon shape="objects"></clr-icon>

              {{ libColumn.COLNAME }}
            </button>
          </clr-tree-node>
        </clr-tree-node>
      </clr-tree-node>
    </ng-container>
  </clr-tree>

  <div *ngIf="librariesPaging" class="w-100 text-center">
    <span class="spinner spinner-sm"> Loading... </span>
  </div>
</app-sidebar>

<div class="content-area">
  <div class="card">
    <div *ngIf="!column && !table" class="no-table-selected">
      <clr-icon
        shape="warning-standard"
        size="60"
        class="is-info icon-dc-fill"
      ></clr-icon>
      <p class="text-center color-gray mt-10" cds-text="section">
        Please select a column or table
      </p>
    </div>

    <ng-container *ngIf="column || table">
      <div
        *ngIf="!graphContainer"
        class="card-header d-flex flex-column justify-content-center"
      >
        <h3
          *ngIf="!currentLineagePathColumn && !currentLineagePathLibTable"
          class="text-center pb-10"
        >
          {{
            currentLineagePathColumn
              ? currentLineagePathLibTable + '.' + currentLineagePathColumn
              : currentLineagePathLibTable
          }}
        </h3>
      </div>

      <div class="card-block">
        <section
          class="form-block sw position-relative d-flex align-items-center"
        >
          <div
            class="linage-title-wrapper d-flex align-items-center font-weight-bold position-absolute"
          >
            <span *ngIf="lineageTableName.length > 0">
              {{ lineageTableName.split('.')[0] }}.<a
                [routerLink]="'/view/data/' + lineageTableName"
                >{{ lineageTableName.split('.')[1] }}</a
              >{{ lineageColumnName.length > 0 ? '.' + lineageColumnName : '' }}
            </span>
          </div>

          <div
            *ngIf="graphContainer"
            class="clr-col-md-12 text-center d-flex justify-content-end"
          >
            <button
              (click)="limitDotDepth = true"
              type="button"
              class="btn btn-outline mr-5"
            >
              Limit depth
            </button>

            <!-- <button class="btn btn-outline" (click)='showSvg()'> Open in New Tab </button> -->
            <div class="btn-group direction d-block">
              <div
                class="radio btn"
                (click)="
                  forwardLineage = false;
                  router.url.includes('column')
                    ? onGenerateClick()
                    : onGenerateGraphTableClick()
                "
              >
                <input
                  type="radio"
                  name="btn-group-demo-radios"
                  [checked]="!forwardLineage"
                />
                <label>Backward</label>
              </div>

              <div
                class="radio btn"
                (click)="
                  forwardLineage = true;
                  router.url.includes('column')
                    ? onGenerateClick()
                    : onGenerateGraphTableClick()
                "
              >
                <input
                  type="radio"
                  name="btn-group-demo-radios"
                  [checked]="forwardLineage"
                />
                <label>Forward</label>
              </div>
            </div>

            <clr-dropdown class="mr-10">
              <button
                class="btn btn-info-outline"
                clrDropdownTrigger
                [disabled]="!column && !table"
              >
                Download
                <clr-icon shape="caret down"></clr-icon>
              </button>

              <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                <div (click)="downloadSVG()" clrDropdownItem>SVG</div>
                <div (click)="downloadPNG()" clrDropdownItem>PNG</div>
                <div (click)="downloadDot()" clrDropdownItem>Dot</div>
                <div *ngIf="flatdata" (click)="downloadCSV()" clrDropdownItem>
                  CSV
                </div>
              </clr-dropdown-menu>
            </clr-dropdown>

            <clr-checkbox-wrapper
              *ngIf="column"
              class="d-flex align-items-center"
            >
              <input
                type="checkbox"
                (change)="generateGraph()"
                clrCheckbox
                name="refreshCache"
                [(ngModel)]="refreshCache"
              />
              <label>Refresh Cache</label>
            </clr-checkbox-wrapper>
          </div>
        </section>

        <div *ngIf="graphContainer" [class.mt-2]="tableFlag">
          <div class="text-center">
            <span *ngIf="graphLoading" class="spinner"> Loading... </span>

            <div *ngIf="!graphLoading" class="position-relative">
              <div class="graph-render-spinner">
                <span *ngIf="graphRendering" class="spinner spinner-sm"></span>
              </div>

              <div id="graph"></div>
            </div>
          </div>
        </div>
      </div>
    </ng-container>
  </div>
</div>

<clr-modal [clrModalOpen]="limitDotDepth" [clrModalClosable]="false">
  <h3 class="modal-title">Limit Depth</h3>
  <div class="modal-body">
    <p>Enter the depth number you would like to limit DOT rendering to:</p>
  </div>
  <div class="modal-footer d-flex flex-column">
    <div class="biglineage-row mb-0i">
      <input
        #maxDepthDot
        type="number"
        min="1"
        placeholder="Max depth value"
        class="clr-input max-depth-input"
      />
    </div>

    <clr-control-helper class="mb-20"
      >To render with unlimited depth, leave the input empty</clr-control-helper
    >

    <div class="biglineage-row">
      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="limitDotDepth = false"
      >
        Cancel
      </button>

      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="resubmitWithMaxDepth(maxDepthDot.value); limitDotDepth = false"
      >
        Resubmit
      </button>
    </div>
  </div>
</clr-modal>

<clr-modal
  [clrModalOpen]="largeDotFileLines !== null"
  [clrModalClosable]="false"
>
  <h3 class="modal-title">Warning</h3>
  <div class="modal-body">
    <p>
      The generated dot file has {{ largeDotFileLines }} lines. Rendering may
      take a long time, how would you like to proceed?
    </p>
  </div>
  <div class="modal-footer d-flex flex-column">
    <div class="biglineage-row">
      <p>Render anyway (this may take a long time)</p>

      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="continueRenderingGraph()"
      >
        Render
      </button>
    </div>

    <div class="biglineage-row">
      <p>Download the result (PNG & SVG require rendering)</p>

      <clr-dropdown>
        <button
          class="btn btn-sm btn-primary mt-3-negative"
          clrDropdownTrigger
          [disabled]="!column && !table"
        >
          Download
          <clr-icon shape="caret down"></clr-icon>
        </button>

        <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
          <div (click)="renderToDownload('SVG')" clrDropdownItem>SVG</div>
          <div (click)="renderToDownload('PNG')" clrDropdownItem>PNG</div>
          <div (click)="downloadDot(); cancelRenderingGraph()" clrDropdownItem>
            Dot
          </div>
        </clr-dropdown-menu>
      </clr-dropdown>
    </div>

    <div class="biglineage-row">
      <p>Resubmit with a max-depth (specify depth)</p>

      <input
        #maxDepth
        type="number"
        min="1"
        placeholder="Max depth value"
        class="clr-input max-depth-input"
      />

      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="resubmitWithMaxDepth(maxDepth.value)"
      >
        Resubmit
      </button>
    </div>

    <div class="biglineage-row">
      <p>Cancel this submission</p>

      <button
        type="button"
        class="btn btn-sm btn-primary"
        (click)="cancelRenderingGraph()"
      >
        Cancel
      </button>
    </div>
  </div>
</clr-modal>
