<script>
import {mapActions, 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 SiteList                 from "@organisms/SiteList/SiteList.vue"
import SiteManager              from "@organisms/UsersManager/UsersManager.vue"

export default {
  name: 'SitesManagerPage',
  components: {SiteManager, SiteList, PageHeader},
  setup() {
    const url = import.meta.env.VITE_API_URL

    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', ["sites", "routes", "newRoute", "selectedSiteState"]),
  },
  mounted () {
    this.uploadSites()
  },
  methods: {
    ...mapActions('services', ["uploadSites", "uploadAndSelectService"]),
    ...mapActions('users', ["fetchUsersList"]),
    async selectSite(siteId, mode = 'prod') {
      await this.fetchUsersList({siteId, mode})
      this.uploadAndSelectService(siteId)
      return "ok"
    }
  }
}
</script>

<template>
  <div class="p-6">
    <PageHeader class="me-2 mb-6" />
    <SiteList
      :serviceOfUsers="serviceOfServices"
      :caseOfUsersInService="caseOfUsersInService"
    />
    <SiteManager
      v-if="selectedSiteState === 'active'"
      :serviceOfUsers="serviceOfUsers"
    />
  </div>
</template>
