<template>
  <div class="container-center">
    <div class="services-view">

      <div class="services-view__summary">
        <div class="services-view__summary-text">
          <span>
            All services is alive
          </span>
        </div>
      </div>
      <div class="services-view__items">
        <div class="services-view__items-item" v-for="(service, index) in services" :key="index">
          <div class="service-sla">
            <Badge
                v-tooltip.bottom="'Uptime based on 24h data'"
                class="user-select__none cursor-default"
                :uptime="service.uptime"
            >
              {{ service.uptime }}
            </Badge>
          </div>
          <div class="service-describe">
            <div class="service-name">
              <span>{{ service.name }}</span>
            </div>
            <div class="service-beats">
              <div class="service-beats__items">
                <template v-for="(status, index) in service.statuses" :key="status.id !== 0 ? status.id : index">
                  <div v-tooltip.bottom="`${moment(status.createdAt).format('MMMM Do YYYY on HH:mm:ss')}`" class="service-beats__beat" :class="[status.status !== 'ok' && status.status]"/>
                </template>
              </div>
              <div class="service-beats__time-marks">
                <div class="service-beats__time-mark">
                  <template v-if="service.statuses[0].id !== 0 && service.statuses[0].createdAt">
                    {{ moment(service.statuses[0].createdAt).fromNow() }}
                  </template>
                </div>
                <div class="service-beats__time-mark">
                  <span>Now</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import type {PublicService} from "~/types/response/publicServices";
import Badge from "~/components/Badge/index.vue";

const {data, refresh} = useFetch<PublicService[]>('/api/public/service')

const updateInterval = ref<NodeJS.Timeout | null>(null);

// onMounted(() => {
//   updateInterval.value = setInterval(async () => {
//     await refresh()
//   }, 5 * 60 * 1000)
// })
//
// onBeforeUnmount(() => {
//   if (updateInterval.value == null) {
//     return
//   }
//
//   updateInterval.value.close()
//
// })

const services = computed<PublicService[]>(() => {
  const items = data.value
  if (!items) {
    return []
  }

  return items
})


</script>


<style scoped lang="scss">

.services {
  &-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;

    &__summary {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 26px;
      border-radius: 6px;

      background-color: color-mix(in srgb, #22c55e, transparent 0%);

      &-text {
        & > span {
          color: white;
        }

      }
    }

    &__items {
      background-color: #0d1117;
      padding: 10px;
      border-radius: 8px;

      display: flex;
      gap: 20px;
      flex-direction: column;

      &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
    }
  }
}

.service {
  &-sla {
    flex-basis: 60px;
  }

  &-describe {
    display: flex;
    align-items: baseline;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
  }

  &-beats {
    &__time {
      &-mark {
        font-size: 12px;
      }

      &-marks {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    &__items {
      display: flex;
    }

    &__beat {
      background-color: color-mix(in srgb, #22c55e, transparent 0%);
      width: 4px;
      height: 16px;
      border-radius: 10em;
      margin: 2px;
      transition: scale .2s;

      &:hover {
        scale: 1.5;
      }

      &.warn {
        background-color: color-mix(in srgb, #f97316, transparent 0%);
      }

      &.error {
        background-color: color-mix(in srgb, #ef4444, transparent 0%);
      }

      &.unchecked {
        background-color: #27272a;
      }
    }
  }
}

</style>
