<script>
import {mapGetters, useStore} from "vuex"
import Service from './ServicesServiceItem.vue'

export default {
  name: 'ServicesPage',
  components: {
    Service,
  },
  props: {
  },
  setup () {
    const store = useStore()
    store.dispatch('services/uploadData')
  },
  data () {
    return {
      isOpenServices: false,
      titleServicesButton: 'Показать больше'
    }
  },
  computed: {
    ...mapGetters('services', ['services']),
  },
  methods: {
    sortingServices: function (services) {
      return services?.sort((a, b) => b.is_online - a.is_online)
    },
    toggleServices: function (isOpenServices) {
      this.isOpenServices = !isOpenServices
      this.titleServicesButton = this.isOpenServices ? 'Скрыть' : 'Показать больше'
    }
  }
}

</script>


<template>
  <div class="col-span-12">
    <div
      class="flex flex-col mt-4 shadow-md mb-1 mx-5 bg-white"
      style="max-width: calc(100vw - 40px); margin-bottom: 30px;"
    >
      <div class="flex flex-col flex-wrap justify-between px-4 pb-2 pt-8 w-full">
        <div class="text-lg font-bold text-center text-gray-600">
          Информация о сети (кэш)
        </div>
        <div class="flex flex-col max-w-full">
          <div>
            Сервисы, записывающие данные в кэш
          </div>
          <div
            id="serviceList"
            :class="`flex flex-wrap h-auto flex-row mt-4 overflow-x-auto w-full gap-4 transition-all pb-4 ${isOpenServices ? 'max-h-full' : 'max-h-[220px]'}`"
          >
            <div 
              v-for="(service, idx) in sortingServices(services)"
              :key="idx"
            >
              <Service
                :idx="idx"
                :name="service.service || service.name"
                :service="service"
              />
            </div>
          </div>
        </div>
      </div>
      <button
        class="w-full max-h-[90px] py-2.5 px-5 text-sm font-medium text-gray-900 bg-gray-100 border-t border-gray-200 hover:bg-gray-100 hover:text-slate-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
        @click="toggleServices(isOpenServices)"
      >   
        {{ titleServicesButton }}
      </button>
    </div>
  </div>
</template>
