<template>
  <Dialog ref="dialog" :show-x="true" @close="step = 0">
    <div class="content">
      <div class="header">
        <div class="summary">
          <div class="title">{{ manifest.title }}</div>
          <div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
          <div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
          <div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
        </div>
        <img class="icon" :src="app.iconUrl" />
      </div>
      <Transition name="slide-left" mode="out-in">
        <div v-if="step === 0">
          <Button @click="onProceed" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
          <div class="screenshots">
            <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
          </div>
          <div class="description" v-html="description"></div>
        </div>
        <div v-else-if="step === 1">
          <div>Now install {{ manifest.title }}</div>
          <br/>
          <br/>
          <Button @click="onInstall" icon="fa-solid fa-circle-down">TODO Submit</Button>
        </div>
      </Transition>
    </div>
  </Dialog>
</template>

<script>

import { Button, Dialog } from 'pankow';
import { prettyDate, prettyFileSize } from 'pankow/utils';
import { marked } from 'marked';

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
const accessToken = localStorage.token;

export default {
  name: 'AppInstallDialog',
  components: {
    Button,
    Dialog,
  },
  data() {
    return {
      API_ORIGIN,
      app: {},
      manifest: {},
      busy: false,
      error: {},
      step: 0
    };
  },
  computed: {
    description() {
      return marked.parse(this.manifest.description || '');
    }
  },
  methods: {
    prettyDate,
    prettyFileSize,
    async open(app) {
      this.step = 0;
      this.app = app;
      this.manifest = app.manifest;

      this.$refs.dialog.open();
    },
    onProceed() {
      this.step = 1;
    },
    onInstall() {
      this.step = 0;
    }
  },
};

</script>

<style scoped>

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.25s ease-out;
}

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

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

.content {
  width: 1024px;
  max-width: 100%;
  height: 1024px;
  max-height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px;
}

.summary {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.title {
  font-size: 32px;
  margin-bottom: 10px;
}

.icon {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin-right: 20px;
}

.description {
  margin: 0 4px;
}

.screenshots {
  margin: 10px 4px;
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 10px 0;
  overflow: auto;
}

.screenshot {
  display: inline-block;
  border-radius: var(--pankow-border-radius);
  height: 300px;
  object-size: contain;
}

</style>
