<template>
  <div class="stage-container">
    <transition name="slide-fade" mode="out-in">
      <div v-if="stage1" key="stage1">
        <div class="add-app">
          <div>App name</div>
          <div>
            <div class="text-container"><input class="input-field" v-model="appName" /></div>
          </div>
          <div class="add-app-group-header">App groups</div>
          <div class="groups-container">
            <group-item v-for="group in groups" :group-obj="group" :key="group.group_name"
                            :selected="isSelected(group.group_name)"
                            @checkbox-changed="updateSelected"></group-item>
          </div>
          <div></div>
        </div>
        <div class="add-app-footer">
          <basic-button :show-icon="false" @click="addApp" :disabled="disableButton">Add app</basic-button>
          <basic-button :show-icon="false" @click="closeModal(false)" variant="secondary">Cancel</basic-button>
        </div>
      </div>
      <div v-else key="stage2">
        <div class="secret-warning">
          <ph-warning size="18px"></ph-warning>
          This is your app's client secret. Please keep it safe. It will not be shown again.
        </div>
        <box variant="border" class="add-app-secret">
          <div class="secret-header">App</div>
          <div class="secret">{{ appName }}</div>
          <div class="secret-header">Client Id</div>
          <div class="secret">{{ clientId }}</div>
          <div class="secret-header">Client secret</div>
          <div class="secret">{{ clientSecret }}</div>
        </box>
        <div class="add-app-footer">
          <basic-button :show-icon="false" @click="closeModal(true)">Close</basic-button>
        </div>
      </div>
    </transition>
  </div>

</template>

<script>

import InputField from "@/components/UI/InputField.vue";
import {mapStores} from "pinia";
import {useGroupStore} from "@/store/group.js";
import Checkbox from "@/components/UI/Checkbox.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import GroupItem from "@/components/UI/GroupItem.vue";
import {useAppsStore} from "@/store/apps.js";
import checkbox from "@/components/UI/Checkbox.vue";
import Box from "@/components/UI/Box.vue";

export default {
  name: "AddApp",
  components: {Box, GroupItem, BasicButton, Checkbox, InputField},
  computed: {
    checkbox() {
      return checkbox
    },
    ...mapStores(useGroupStore, useAppsStore),
    groups() {
      return this.groupStore.groups;
    },
    disableButton() {
      return this.appName === null || this.appName.length === 0 || Object.values(this.selectedGroups).every(value => !value);
    }

  },
  async created() {
    await this.groupStore.loadGroups()
    this.groupStore.groups?.forEach(group => {
      this.selectedGroups[group.group_name] = false;
    })
  },
  data() {
    return {
      stage1: true,
      appName: '',
      selectedGroups: {},
      clientSecret: '',
      clientId: '',
    }
  },
  methods: {
    isSelected(groupName) {
      if (groupName === null || this.selectedGroups == null || Object.keys(this.selectedGroups).length === 0)
        return false;

      const group = this.selectedGroups[groupName];
      if ((group ?? null) === null)
        return false;
      return group;
    },
    async addApp() {
      if (!this.disableButton) {
        const app = await this.appsStore.addApp(this.appName, this.selectedGroups);
        this.stage1 = false;
        this.clientSecret = app.client_secret;
        this.clientId = app.client_id;
      }
    },
    updateSelected(checked, groupName) {
      this.selectedGroups[groupName] = checked;

    },
    closeModal() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>



.groups-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.8rem;
}

.stage-container {
  position: relative;
  min-height: 20rem;
  margin: 1.6rem;
  min-width: 70rem;
}

/* Transition animations */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s ease-in;
}

.slide-fade-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.add-app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1.6rem;
  font-weight: 500;
  font-size: 1.4rem;
  align-items: center;
}

.add-app-group-header {
  align-self: start;

}

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 0 auto;
}


.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;
  width: 100%;
  min-width: 5rem;
}

.add-app-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}

.secret-warning {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  gap: 1.6rem;
  background-color: #c3cfdf;
  color: #002F54;
  border-radius: 0.8rem;
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}

.secret-header {
  font-weight: 500;
  font-size: 1.4rem;
  color: #002F54;
}

.secret {
  font-weight: 400;
  font-size: 1.4rem;
  color: #6b7280;
}

.add-app-secret {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2.4rem;
  font-weight: 500;
  font-size: 1.4rem;
  align-items: center;
  margin-bottom: 2.4rem;

}


</style>