<script>
import ModuleContainer from "@organisms/UsersManager/UsersManagerContainer.vue";
import UsersTable from "@organisms/UsersManager/UsersManagerUsersTable.vue";
import UsersEditor from "@organisms/UsersManager/UsersManagerUserEditor.vue";
import ManagerTitle from "@organisms/UsersManager/UsersManagerTitle.vue";
import VButton from "@atoms/VButton.vue";
import {mapGetters} from 'vuex'

export default {
  name: 'UsersManager',
  components: {ModuleContainer, UsersTable, UsersEditor, ManagerTitle, VButton},
  props: {
    serviceOfUsers: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      componentState: 'view' // view | create | select
    }
  },
  computed: {
    ...mapGetters('users', ["usersList"]),
    gridCols() {
      return this.componentState === 'view' ? 'grid-cols-1' : 'grid-cols-2'
    }
  },
  methods: {
    openUserPanelOfCreate() {
      this.componentState = 'create'
    },
    openUserPanelOfSelect() {
      this.componentState = 'select'
      this.serviceOfUsers.fetchUsersOffSite()
    },
    closeUserPanel() {
      this.componentState = 'view'
    }
  }
}
</script>

<template>
  <div
    class="grid grid-cols-12 gap-4"
    :class="`${gridCols}`"
  >
    <ModuleContainer :class="[{'col-span-12': componentState === 'view', 'col-span-4': componentState !== 'view' }]">
      <ManagerTitle class="mb-4">
        <template #title>
          <span>Список пользователей</span>
        </template>
        <template #control>
          <div class="flex items-center gap-2">
            <VButton
              color="blue"
              test-id="toggle-new-user"
              @click="openUserPanelOfCreate"
            >
              Создать пользователя
            </VButton>
            <VButton
              color="purple"
              test-id="toggle-add-user"
              @click="openUserPanelOfSelect"
            >
              Добавить существующего
            </VButton>
          </div>
        </template>
      </ManagerTitle>
      <UsersTable :usersList="usersList" />
    </ModuleContainer>
    <ModuleContainer
      v-if="componentState === 'create'"
      class="col-span-8"
    >
      <ManagerTitle test-id="new-user-container">
        <template #title>
          <span>Создать пользователя</span>
        </template>
        <template #control>
          <VButton
            class="close-button"
            color="gray"
            @click="closeUserPanel"
          >
            Закрыть
          </VButton>
        </template>
      </ManagerTitle>
      <UsersEditor />
    </ModuleContainer>
    <ModuleContainer
      v-if="componentState === 'select'"
      class="col-span-8"
    >
      <ManagerTitle>
        <template #title>
          <span>Выбрать пользователя</span>
        </template>
        <template #control>
          <VButton
            class="close-button"
            color="gray"
            @click="closeUserPanel"
          >
            Закрыть
          </VButton>
        </template>
      </ManagerTitle>
      <UsersEditor />
    </ModuleContainer>
  </div>
</template>
