<script>
import { useAuthStore } from '@/stores/auth'

import { useErrorStore } from '@/stores/errors'
const errorStore = useErrorStore()
const apiHost = import.meta.env.VITE_CONJUREOS_HOST
const authStr = useAuthStore()
export default {
  data() {
    return {
      selectedFiles: [],
      textInput: ''
    }
  },
  methods: {
    submitForm() {
      const form = this.$refs.uploadForm
      const formData = new FormData(form)
      console.log('Upload ' + JSON.stringify(authStr.getAuth()))

      fetch(apiHost + 'games', {
        method: 'POST',
        body: formData,
        headers: {
          Authorization: `Bearer ${authStr.getAuth().token}`,
          'API-Version': 1
        }
      })
        .then((response) => response.text())
        .then((result) => {
          console.log(result)
        })
        .catch((error) => {
          console.error('Error:', error)

          errorStore.unshift(error)
        })
    },
    filesChanges() {
      this.selectedFiles = Array.from(this.$refs.inputFile.files || [])
    }
  }
}
</script>

<template>
  <article>
    <h1 class="text-foreground">Upload</h1>
    <form
      ref="uploadForm"
      enctype="multipart/form-data"
      class="flex flex-col gap-2"
      @submit.prevent="submitForm"
    >
      <!--      <div class="name-input-wrapper">-->
      <!--        <label for="name" class="block text-sm font-medium text-gray-700">Name:</label>-->
      <!--        <input type="text" name="name" id="name" required v-model="textInput"-->
      <!--               class="mt-1 p-2 border border-gray-300 rounded-md text-background focus:ring-primary-500 focus:border-primary-500 w-full">-->
      <!--      </div>-->
      <div class="file-upload-wrapper">
        <input
          ref="inputFile"
          type="file"
          name="file"
          id="file"
          accept=".conj"
          class="cursor-pointer"
          @change="filesChanges"
        />
        <label>
          <strong class="instruction">Upload your file here</strong>
          <em class="rules">Only <code>.conj</code> accepted.</em>
          <em class="file-name" v-if="!!selectedFiles?.length">{{ selectedFiles[0].name }}</em>
        </label>
      </div>

      <div class="text-foreground w-full my-2 underline">
        <RouterLink to="manual-upload" class="hover:color-blue-300"
          >Or manually enter your metadata</RouterLink
        >
      </div>

      <button
        class="bg-transparent font-bold text-foreground py-2 px-4 border border-primary rounded hover:bg-primary"
        type="submit"
      >
        Upload
      </button>
    </form>
  </article>
</template>

<style scoped lang="scss">
form {
  padding: 1rem 0;
}

.file-upload-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  input {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  }

  label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.5rem;
    padding: 1rem;
    color: var(--vt-c-black);
    background-color: var(--vt-c-white);

    .file-name {
      align-self: end;
      color: var(--vt-c-black-soft);
    }

    &.invalid {
      background-color: var(--vt-c-bittersweet);
    }
  }

  button[type='submit'] {
    &:hover {
      background-color: var(--vt-c-munsell);
    }
  }

  &:hover {
    label {
      background-color: var(--vt-c-white-mute);
    }
  }
}
</style>
