<script>
import {mapGetters} from 'vuex'
import {useStore}               from '@store/index.js'

import AdapterOfServices    from '@adapters/adapterOfServices/Services'
import AdapterOfUsers       from '@adapters/adapterOfUsers/Users'
import ServiceOfUsers       from '@services/serviceOfUsers/Users.js'
import ServiceOfServices    from '@services/serviceOfServices/Services.js'
import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'

import PageHeader               from "@atoms/AppPageHeader.vue"
import ServicesList                 from "@organisms/ServicesList/ServicesList.vue"
import UsersManager              from "@organisms/UsersManager/UsersManager.vue"

export default {
  name: 'ServicesManagerPage',
  components: {UsersManager, ServicesList, PageHeader},
  setup() {
    const url = import.meta.env.VITE_API_ADDR

    const adapterOfServices = new AdapterOfServices(url)
    const adapterOfUsers    = new AdapterOfUsers(url)

    const store = useStore()

    const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
    const serviceOfServices = new ServiceOfServices(adapterOfServices, store)

    const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)

    return {serviceOfUsers, serviceOfServices, caseOfUsersInService}
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters('services', ["services", "routes", "newRoute", "selectedService"]),
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<template>
  <div class="p-6">
    <PageHeader
      :serviceOfServices="serviceOfServices"
      class="me-2 mb-6"
    />
    <ServicesList
      :serviceOfServices="serviceOfServices"
      :caseOfUsersInService="caseOfUsersInService"
    />
    <UsersManager
      v-if="selectedService"
      :serviceOfUsers="serviceOfUsers"
      :caseOfUsersInService="caseOfUsersInService"
      :selectedService="selectedService"
    />
  </div>
</template>
