<script>
import Button from "@atoms/VButton.vue"
import Spinner from "@molecules/VSpinner/VSpinner.vue"
import AdapterOfMachines from "@adapters/AdapterOfMachines"
import ApiOfPacks from "@api/ApiOfPacks"
import {testsAdapters} from './helpers'

export default {
  
  name: 'TestsAdapters',
  components: {
    Button,
    Spinner
  },
  setup() {
    // const url = import.meta.env.VITE_API_ADDR
    const url = import.meta.env.VITE_SCAND_API_ADDR

    const adapterOfMachines = new AdapterOfMachines(url)
    const apiOfPacks = new ApiOfPacks(url)

    return {
      adapterOfMachines, 
      apiOfPacks
    }
  },
  data() {
    return {
      adaptersData: [],
      isOpenData: false,
      testState: "await", // await | loading | isLoaded | error
      errorTest: null,
    }
  },
  computed: {
  },
  watch: {
    adaptersData: {
      handler (adaptersData) {
        const isError = adaptersData.some(adapter => adapter.testState === 'error')
        if (isError) {
          this.errorTest = isError
        }
      }
    }
  },
  methods: {
    async startTests () {
      this.testState = 'loading'
      const resultData = await testsAdapters({adapterOfMachines: this.adapterOfMachines, apiOfPacks: this.apiOfPacks})
      this.adaptersData = resultData
      this.testState = 'isLoaded'
    },
    setOpenData (adapter) {
      adapter.isOpenData = !adapter.isOpenData
    }
  }
}

</script>
<template>
  <div class="grid grid-cols-12 gap-6 col-span-12 h-full">
    <div
      class="rounded-md bg-light px-4 pt-4 pb-6 gap-2 shadow lg:col-span-4 xl:col-span-3 2xl:col-span-2 col-span-12"
      autocomplete="off"
    >
      <h1 class="font-medium leading-tight text-xl mb-4 text-slate-600">
        Тестирование адаптеров
      </h1>
      <div class="grid gap-3 mb-3 ">
        <div class="relative ">
          <div
            v-if="testState === 'await'"
            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
          >
            Запустите тест
          </div>
          <div
            v-if="testState === 'isLoaded'"
            :class="`block mb-2 text-sm font-medium dark:text-gray-300 text-left ${errorTest ? 'text-red-500' : 'text-blue-500'}`"
          >
            {{ `Тестирование ${errorTest ? 'не' : ''} пройдено` }}
          </div>
        </div>
      </div>
      <div class="grid gap-3 grid-cols-4">
        <Button
          type="button"
          class="col-span-4 lg:col-span-4 text-sm text-white hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full sm:w-auto px-5 py-1 text-center  dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition_up"
          :class="{ 'bg-primary cursor-pointer': testState !== 'loading', 'bg-gray-500 cursor-auto': testState === 'loading' }"
          :disable="testState === 'loading'"
          title="Запустить"
          @click="startTests"
        />
      </div>
    </div>
    <div class="lg:col-span-8 xl:col-span-9 2xl:col-span-10 col-span-12 bg-light shadow">
      <div
        v-if="testState === 'await'"
        id="reportAdapters"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
      >
        <span> Нажмите кнопку Запустить для начала теста</span>
      </div>
      <div
        v-if="testState === 'loading'"
        id="reportAdapters"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md  w-full h-full flex items-center justify-center"
      >
        <Spinner />
      </div>
      <div
        v-if="testState === 'isLoaded'"
        id="reportAdapters"
        class="tab-pane active relative text-center min-h-[300px] relative rounded-md "
      >
        <span class="text-base">
          Результаты тестов
        </span>
        <div
          v-if="adaptersData.length > 0"
          class="text-left"
        >
          <div 
            v-for="(adapter, idx) in adaptersData"
            :key="idx"
            class="border-b-2 border-gray-500 mx-3 p-3"
          >
            <div class="my-3">
              {{ `${idx + 1}. Тест ${adapter.name} ${!adapter.errorTest ? 'пройден' : 'не пройден'}` }}
              <i :class="`relative text-lg top-[3px] ml-2 ${adapter.errorTest ? 'ri-close-circle-line text-red-500' : 'ri-checkbox-circle-line text-green-500'}`" />
              <Button
                type="button"
                class="text-sm text-white hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full sm:w-auto ml-3 px-5 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition_up"
                :class="{ 'bg-primary cursor-pointer': !errorTest, 'bg-gray-500 cursor-auto': errorTest }"
                :title="`${adapter.isOpenData ? 'Скрыть данные' : 'Показать данные'}`"
                @click="setOpenData(adapter)"
              />
            </div>
            <div
              v-if="adapter.isOpenData"
              class="max-h-[300px] text-gray-500 overflow-auto"
            >
              <div v-if="adapter.resData">
                <div class="text-blue-500">
                  <pre>
                  {{ adapter.resData }}
                  </pre>
                </div>
              </div>
              <div v-if="adapter.errorTest">
                <div class="text-red-500">
                  <code>
                    {{ adapter.errorTest }}
                  </code>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
