<app-sidebar>
  <div *ngIf="datasetsLoading" class="my-10-mx-auto text-center">
    <clr-spinner clrMedium></clr-spinner>
  </div>

  <div *ngIf="!parsedDatasets.length" class="text-center mb-10">
    <button
      (click)="fileUploadInput.click()"
      id="browse-file"
      class="btn btn-primary btn-sm"
      [disabled]="selectedFile !== null || submittingCsv"
    >
      Browse file
    </button>
    <input
      hidden
      #fileUploadInput
      id="file-upload"
      type="file"
      (change)="onFileChange($event)"
      multiple
    />
  </div>

  <ng-container *ngIf="parsedDatasets.length && !submittedCsvDatasets.length">
    <div *ngIf="!excelsSubmitted" class="text-center mb-10">
      <button (click)="onDiscard()" class="btn btn-danger btn-sm mr-10">
        Discard
      </button>
      <button
        (click)="onSubmitAll()"
        id="submit-all"
        class="btn btn-primary btn-sm"
      >
        Submit All
      </button>
    </div>

    <p cds-text="caption" class="ml-10 mb-10">Found tables:</p>
    <clr-tree>
      <clr-tree-node *ngFor="let dataset of parsedDatasets">
        <button
          (click)="onParsedDatasetClick(dataset)"
          class="clr-treenode-link whitespace-nowrap d-flex clr-align-items-center"
          [class.active]="dataset.active"
        >
          <ng-container *ngIf="dataset.submitResult">
            <cds-icon
              *ngIf="dataset.submitResult.error"
              status="danger"
              shape="exclamation-circle"
            ></cds-icon>
            <cds-icon
              *ngIf="dataset.submitResult.success"
              status="success"
              shape="check-circle"
            ></cds-icon>
          </ng-container>

          <ng-container *ngIf="!dataset.submitResult">
            <ng-container *ngIf="dataset.datasource">
              <cds-icon
                *ngIf="!(dataset.datasource.length && dataset.parseResult)"
                status="danger"
                shape="exclamation-circle"
              ></cds-icon>
              <cds-icon
                *ngIf="dataset.datasource.length && dataset.parseResult"
                shape="table"
              ></cds-icon>
            </ng-container>

            <ng-container *ngIf="!dataset.datasource">
              <cds-icon *ngIf="!dataset.parsingTable" shape="table"></cds-icon>

              <clr-spinner *ngIf="dataset.parsingTable" clrSmall></clr-spinner>
            </ng-container>
          </ng-container>

          <span class="ml-5"> {{ dataset.libds }} </span>
        </button>
      </clr-tree-node>
    </clr-tree>
  </ng-container>

  <ng-container *ngIf="submittedCsvDatasets.length">
    <p cds-text="caption" class="ml-10 mb-10 mt-10">Submitted tables:</p>
    <clr-tree>
      <clr-tree-node *ngFor="let dataset of submittedCsvDatasets">
        <button
          (click)="onSubmittedCsvDatasetClick(dataset)"
          class="clr-treenode-link whitespace-nowrap"
          [class.active]="dataset.active"
        >
          <cds-icon
            *ngIf="dataset.error"
            status="danger"
            shape="exclamation-circle"
          ></cds-icon>
          <cds-icon
            *ngIf="dataset.success"
            status="success"
            shape="check-circle"
          ></cds-icon>
          <cds-icon shape="table"></cds-icon>
          {{ dataset.libds }}
        </button>
      </clr-tree-node>
    </clr-tree>
  </ng-container>

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

<div #contentArea class="content-area">
  <div class="card no-borders h-100 d-flex clr-flex-column">
    <div
      class="header-row clr-row justify-content-between clr-justify-content-center w-100 m-0"
    >
      <p cds-text="section">Multi Dataset Load</p>
    </div>

    <div
      *ngIf="selectedFile === null && !submittingCsv"
      class="no-table-selected pointer-events-none"
    >
      <clr-icon
        aria-hidden="true"
        shape="upload-cloud"
        size="40"
        class="is-info icon-dc-fill"
      ></clr-icon>
      <p class="text-center color-gray mt-10" cds-text="section">
        Please upload a file
      </p>
    </div>

    <ng-container *ngIf="selectedFile !== null || submittingCsv">
      <ng-container *ngIf="!parsedDatasets.length && selectedFile !== null">
        <div class="d-flex clr-justify-content-center mt-15">
          <div class="dataset-input-wrapper">
            <p cds-text="secondary regular" class="mb-5">
              Selected file: <strong>{{ selectedFile.name }}</strong>
              <clr-tooltip>
                <cds-icon
                  clrTooltipTrigger
                  (click)="onDiscardFile()"
                  shape="trash"
                  status="danger"
                  class="ml-5 cursor-pointer"
                ></cds-icon>
                <clr-tooltip-content> Discard the file </clr-tooltip-content>
              </clr-tooltip>
            </p>
            <p cds-text="secondary regular" class="mb-20">
              File size: <strong>{{ selectedFile.sizeMB }} MB</strong>
            </p>
            <p cds-text="secondary regular" class="mb-15">
              Paste or type the list of datasets to upload:
            </p>

            <clr-control-helper class="mb-5"
              >Each row is one dataset. We will automatically detect tables by
              the sheetname and populate if any.</clr-control-helper
            >

            <hot-table
              #hotInstanceUserDataset
              id="hotTableUserDataset"
              class="mt-15"
              [settings]="hotUserDatasetsSettings"
            >
            </hot-table>

            <div class="dataset-selection-actions text-right mt-10">
              <button
                (click)="onStartParsingFile()"
                id="continue-btn"
                class="btn btn-primary btn-sm"
                [disabled]="!matchedDatasets.length"
                [clrLoading]="uploadLoading"
              >
                Continue
              </button>
            </div>
          </div>
        </div>
      </ng-container>

      <ng-container
        *ngIf="parsedDatasets.length && !submittedCsvDatasets.length"
      >
        <div
          *ngIf="!activeParsedDataset"
          class="no-table-selected pointer-events-none"
        >
          <ng-container *ngIf="fileLoadingState !== FileLoadingState.parsed">
            <clr-icon
              aria-hidden="true"
              shape="process-on-vm"
              size="40"
              class="is-info icon-dc-fill"
            ></clr-icon>

            <p class="text-center color-gray mt-10" cds-text="section">
              {{ fileLoadingState }}...
            </p>
          </ng-container>

          <ng-container *ngIf="fileLoadingState === FileLoadingState.parsed">
            <clr-icon
              aria-hidden="true"
              shape="warning-standard"
              size="40"
              class="is-info icon-dc-fill"
            ></clr-icon>
            <p class="text-center color-gray mt-10" cds-text="section">
              Please select a dataset on the left to review the data
            </p>
          </ng-container>
        </div>

        <ng-container *ngIf="activeParsedDataset">
          <div
            *ngIf="activeParsedDataset.submitResult"
            class="d-flex clr-justify-content-between p-10 mt-15 submission-results"
          >
            <div>
              <p cds-text="secondary regular" class="mb-10">
                Submit Status:
                <span
                  *ngIf="activeParsedDataset.submitResult?.success"
                  class="color-green"
                  ><strong>SUCCESS</strong></span
                >
                <span
                  *ngIf="activeParsedDataset.submitResult?.error"
                  class="color-red"
                  ><strong>ERROR</strong></span
                >
              </p>
              <p
                *ngIf="activeParsedDataset.submitResult?.error"
                cds-text="secondary regular"
              >
                Error details:
              </p>
            </div>

            <div>
              <button
                *ngIf="
                  !submittingCsv && activeParsedDataset.submitResult?.error
                "
                (click)="reSubmitTable(activeParsedDataset)"
                class="btn btn-primary mt-10"
                [clrLoading]="submitLoading"
              >
                Resubmit
              </button>
              <button
                (click)="
                  downloadFile(
                    activeParsedDataset.submitResult.log ||
                      activeParsedDataset.submitResult.success ||
                      activeParsedDataset.submitResult.error
                  )
                "
                class="btn btn-primary-outline mt-10"
              >
                Download log
              </button>
            </div>
          </div>

          <div
            *ngIf="activeParsedDataset.submitResult?.error"
            class="error-field mt-15"
          >
            <div class="log-wrapper">
              {{ activeParsedDataset.submitResult?.error | json }}
            </div>
          </div>

          <div class="d-flex clr-justify-content-between p-10 mt-15">
            <div>
              <p cds-text="secondary regular" class="mb-10">
                Found in range:

                <ng-container *ngIf="activeParsedDataset.parseResult">
                  <strong
                    >"{{
                      activeParsedDataset.parseResult.rangeSheetRes?.sheetName
                    }}"!{{
                      activeParsedDataset.parseResult.rangeSheetRes
                        ?.rangeAddress
                    }}</strong
                  >
                </ng-container>

                <ng-container *ngIf="!activeParsedDataset.parseResult">
                  <strong *ngIf="!activeParsedDataset.parsingTable"
                    >No data found</strong
                  >

                  <span
                    *ngIf="activeParsedDataset.parsingTable"
                    class="d-flex clr-align-items-center"
                  >
                    <strong>Searching for the data...</strong>
                    <clr-spinner class="ml-5" clrSmall></clr-spinner>
                  </span>
                </ng-container>
              </p>
              <p cds-text="secondary regular">
                Dataset:
                <strong>
                  <clr-tooltip>
                    <a
                      clrTooltipTrigger
                      [routerLink]="'/editor/' + activeParsedDataset.libds"
                      >{{ activeParsedDataset.libds }}</a
                    >
                    <clr-tooltip-content
                      [clrPosition]="'top-right'"
                      [clrSize]="'sm'"
                    >
                      Click to edit the table
                    </clr-tooltip-content>
                  </clr-tooltip>
                </strong>
              </p>
            </div>

            <div>
              <clr-toggle-wrapper>
                <input
                  type="checkbox"
                  clrToggle
                  [(ngModel)]="activeParsedDataset.includeInSubmission"
                  name="options"
                  [disabled]="
                    !(
                      activeParsedDataset.datasource &&
                      activeParsedDataset.parseResult
                    )
                  "
                  required
                  value="option1"
                />
                <label>Include in submission</label>
              </clr-toggle-wrapper>
            </div>
          </div>

          <div *ngIf="isHotHidden" class="text-center w-100">
            <clr-spinner class="spinner-md"></clr-spinner>
          </div>

          <hot-table
            #hotInstanceMain
            id="hotTable"
            class="mt-15"
            [settings]="hotMainTableSettings"
          >
          </hot-table>
        </ng-container>
      </ng-container>

      <ng-container *ngIf="submittedCsvDatasets.length">
        <div
          *ngIf="!activeSubmittedCsvDataset"
          class="no-table-selected pointer-events-none"
        >
          <clr-icon
            aria-hidden="true"
            shape="warning-standard"
            size="40"
            class="is-info icon-dc-fill"
          ></clr-icon>
          <p class="text-center color-gray mt-10" cds-text="section">
            Please select a dataset on the left to review the submit results
          </p>
        </div>
      </ng-container>

      <ng-container *ngIf="activeSubmittedCsvDataset">
        <div class="d-flex clr-justify-content-between p-10">
          <div>
            <p cds-text="secondary regular" class="mb-10">
              Matched with dataset:
              <strong>
                <clr-tooltip>
                  <a
                    clrTooltipTrigger
                    [routerLink]="'/editor/' + activeSubmittedCsvDataset.libds"
                    >{{ activeSubmittedCsvDataset.libds }}</a
                  >
                  <clr-tooltip-content
                    [clrPosition]="'top-right'"
                    [clrSize]="'sm'"
                  >
                    Click to edit the table
                  </clr-tooltip-content>
                </clr-tooltip>
              </strong>
            </p>
            <p cds-text="secondary regular" class="mb-10">
              Status:
              <span
                *ngIf="activeSubmittedCsvDataset.success"
                class="color-green"
                ><strong>SUCCESS</strong></span
              >
              <span *ngIf="activeSubmittedCsvDataset.error" class="color-red"
                ><strong>ERROR</strong></span
              >
            </p>
            <p
              *ngIf="activeSubmittedCsvDataset.error"
              cds-text="secondary regular"
            >
              Error details:
            </p>
          </div>

          <div>
            <button
              (click)="
                downloadFile(
                  activeSubmittedCsvDataset.success ||
                    activeSubmittedCsvDataset.error
                )
              "
              class="btn btn-primary-outline mt-10"
            >
              Download log
            </button>
          </div>
        </div>

        <div *ngIf="activeSubmittedCsvDataset.error" class="error-field mt-15">
          <div class="log-wrapper">
            {{ activeSubmittedCsvDataset.error | json }}
          </div>
        </div>
      </ng-container>
    </ng-container>

    <!-- <div>
      <p
        *ngIf="
          licenceState.value.viewer_rows_allowed !== Infinity &&
          hotTable.data &&
          hotTable.data.length > licenceState.value.viewer_rows_allowed
        "
        class="mt-2-i w-100 text-center"
      >
        To display more than {{ licenceState.value.viewer_rows_allowed }} rows,
        contact <contact-link />
      </p>
    </div> -->
  </div>
</div>

<clr-modal [(clrModalOpen)]="showSubmitReasonModal" [clrModalClosable]="false">
  <h3 class="modal-title">
    Submit {{ tablesToSubmit.length }}
    {{ tablesToSubmit.length === 1 ? 'table' : 'tables' }} for approval
  </h3>
  <div class="modal-body">
    <p
      *ngIf="licenceState.value.submit_rows_limit !== Infinity"
      cds-text="body"
      class="licence-limit-notice mt-0 mb-15"
    >
      Due to current licence, only
      {{ licenceState.value.submit_rows_limit }} rows in each file will be
      submitted. To remove the restriction, contact
      support&#64;datacontroller.io.
    </p>

    <div class="text-area-full-width">
      <label for="formFields_8" class="mb-5 d-block">Message</label>
      <textarea
        clrTextarea
        [(ngModel)]="submitReasonMessage"
        tabindex="0"
        class="submit-reason"
        type="text"
        id="formFields_8"
      ></textarea>
    </div>

    <p cds-text="caption_clean" class="mt-10">
      Tables will be sent sequentially, logs will be available after all tables
      are submitted.
    </p>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-outline"
      [disabled]="submitLoading"
      (click)="showSubmitReasonModal = false"
    >
      Cancel
    </button>
    <button
      type="button"
      id="submit-tables"
      class="btn btn-primary"
      [clrLoading]="submitLoading"
      (click)="submitTables()"
    >
      Submit
    </button>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="csvSubmitting" [clrModalClosable]="false">
  <h3 class="modal-title">
    Submitting {{ csvFiles.length }} CSV
    {{ csvFiles.length === 1 ? 'file' : 'files' }}
  </h3>
  <div class="modal-body">
    <div class="text-center">
      <clr-spinner clrMedium></clr-spinner>
    </div>

    <p cds-text="caption_clean" class="mt-10 text-center">
      This will take few moments
    </p>
  </div>
</clr-modal>
