<script setup lang="ts">
import { files, unhandledErrors } from '../../composables/client'
import { filesFailed, filesSnapshotFailed, filesSuccess, time } from '../../composables/summary'
</script>

<template>
  <div
    data-testid="test-files-entry"
    grid="~ cols-[min-content_1fr_min-content]"
    items-center gap="x-2 y-3" p="x4" relative font-light w-80
    op80
  >
    <div i-carbon-document />
    <div>Files</div>
    <div class="number" data-testid="num-files">
      {{ files.length }}
    </div>

    <template v-if="filesSuccess.length">
      <div i-carbon-checkmark />
      <div>Pass</div>
      <div class="number">
        {{ filesSuccess.length }}
      </div>
    </template>

    <template v-if="filesFailed.length">
      <div i-carbon-close />
      <div>
        Fail
      </div>
      <div class="number" text-red5>
        {{ filesFailed.length }}
      </div>
    </template>

    <template v-if="filesSnapshotFailed.length">
      <div i-carbon-compare />
      <div>
        Snapshot Fail
      </div>
      <div class="number" text-red5>
        {{ filesSnapshotFailed.length }}
      </div>
    </template>

    <template v-if="unhandledErrors.length">
      <div i-carbon-checkmark-outline-error />
      <div>
        Errors
      </div>
      <div class="number" text-red5>
        {{ unhandledErrors.length }}
      </div>
    </template>

    <div i-carbon-timer />
    <div>Time</div>
    <div class="number" data-testid="run-time">
      {{ time }}
    </div>
  </div>
  <template v-if="unhandledErrors.length">
    <div bg="red500/10" text="red500" p="x3 y2" max-w-xl m-2 rounded>
      <h3 text-center mb-2>
        Unhandled Errors
      </h3>
      <p text="sm" font-thin mb-2 data-testid="unhandled-errors">
        Vitest caught {{ unhandledErrors.length }} error{{ unhandledErrors.length > 1 ? 's' : '' }} during the test run.<br>
        This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
      </p>
      <details
        data-testid="unhandled-errors-details"
        class="scrolls unhandled-errors"
        text="sm" font-thin pe-2.5 open:max-h-52 overflow-auto
      >
        <summary font-bold cursor-pointer>Errors</summary>
        <ErrorEntry v-for="e in unhandledErrors" :error="e" />
      </details>
    </div>
  </template>
</template>

<style scoped>
.number {
  font-weight: 400;
  text-align: right;
}

.unhandled-errors {
  --cm-ttc-c-thumb: #CCC;
}

html.dark .unhandled-errors {
  --cm-ttc-c-thumb: #444;
}
</style>
