<template>
  <div class="apps-container">
    <div class="app-list-actions">

    </div>
    <div class="app-list-header">
      <div>App</div>
      <div>Groups</div>
      <div>Action</div>
    </div>
    <div class="app-list">

      <app-list-item v-for="app in apps" :app="app" @delete-app="deleteApp" @export-app="exportApp"></app-list-item>

    </div>

    <modal :state="modalState">
      <add-app @close="closeModal"></add-app>
    </modal>


    <div class="app-list-actions">

      <basic-button icon="Upload" @click="importApp">Import</basic-button>
      <basic-button icon="Plus" @click="modalState = true">New App</basic-button>
    </div>
  </div>


</template>

<script>
import BasicButton from "@/components/UI/BasicButton.vue";
import AppListItem from "@/components/UI/AppListItem.vue";
import {mapStores} from "pinia";
import {useAppsStore} from "@/store/apps.js";
import Modal from "@/components/UI/Modal.vue";
import AddApp from "@/components/layout/config/AddApp.vue";
import Dropdown from "@/components/UI/Dropdown.vue";
import IconButton from "@/components/UI/IconButton.vue";

export default {
  name: "Apps",
  props: {
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  components: {IconButton, Dropdown, AddApp, Modal, AppListItem, BasicButton},
  computed: {
    ...mapStores(useAppsStore),
    apps() {
      return this.appsStore.apps;
    }
  },
  data() {
    return {
      modalState: false,
      exportedApp: null
    }
  },
  methods: {
    async closeModal(success) {
      this.modalState = false;
      if (success) {
        await this.appsStore.loadApps();
      }
    },
    deleteApp(id) {
      this.appsStore.deleteApp(id);
    },
    async exportApp(id) {
      const response = await this.appsStore.exportApp(id);
      const app = this.appsStore.getById(id);

      if(response?.data) {
        const base64String = response.data;

        const blob = new Blob([base64String], { type: 'text/plain' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `${app.name}.app`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      }

    },
    async importApp() {

      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.app';

      input.onchange = async (event) => {
        const file = event.target.files[0];
        if (file) {
          try {
            const fileContent = await this.readFileContent(file);
            await this.appsStore.importApp(fileContent);
          } catch (error) {

          }
        }
      };

      // File Dialog öffnen
      input.click();
    },

    readFileContent(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (e) => {
          resolve(e.target.result);
        };

        reader.onerror = (error) => {
          reject(error);
        };

        reader.readAsText(file);
      });
    }
  },
  async created() {
    await this.appsStore.loadApps();
  }
}
</script>

<style scoped>

.apps-container {
  padding: 2.4rem;
}

.app-list-header {
  display: grid;
  grid-template-columns: 1fr 2fr 0.5fr;
  grid-gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  border-bottom: 0.1rem solid #E3EDFF;
}

.app-list-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
  gap: 1.6rem
}

.app-list {
  margin-bottom: 2.4rem;
}

</style>