<template>
  <div
    role="button"
    @click="createFetch"
  >
    <div>
      <slot />
    </div>
    <modal
      class="small"
      :show.sync="showModal"
    >
      <h3 class="header">
        <translate translate-context="Popup/*/Title">
          Refreshing object from remote server…
        </translate>
      </h3>
      <div class="scrolling content">
        <template v-if="fetch && fetch.status != 'pending'">
          <div
            v-if="fetch.status === 'skipped'"
            class="ui message"
          >
            <h4 class="header">
              <translate translate-context="Popup/*/Message.Title">
                Refresh was skipped
              </translate>
            </h4>
            <p>
              <translate translate-context="Popup/*/Message.Content">
                The remote server answered, but returned data was unsupported by Funkwhale.
              </translate>
            </p>
          </div>
          <div
            v-else-if="fetch.status === 'finished'"
            class="ui success message"
          >
            <h4 class="header">
              <translate translate-context="Popup/*/Message.Title">
                Refresh successful
              </translate>
            </h4>
            <p>
              <translate translate-context="Popup/*/Message.Content">
                Data was refreshed successfully from remote server.
              </translate>
            </p>
          </div>
          <div
            v-else-if="fetch.status === 'errored'"
            class="ui error message"
          >
            <h4 class="header">
              <translate translate-context="Popup/*/Message.Title">
                Refresh error
              </translate>
            </h4>
            <p>
              <translate translate-context="Popup/*/Message.Content">
                An error occurred while trying to refresh data:
              </translate>
            </p>
            <table class="ui very basic collapsing celled table">
              <tbody>
                <tr>
                  <td>
                    <translate translate-context="Popup/Import/Table.Label/Noun">
                      Error type
                    </translate>
                  </td>
                  <td>
                    {{ fetch.detail.error_code }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <translate translate-context="Popup/Import/Table.Label/Noun">
                      Error detail
                    </translate>
                  </td>
                  <td>
                    <translate
                      v-if="fetch.detail.error_code === 'http' && fetch.detail.status_code"
                      :translate-params="{status: fetch.detail.status_code}"
                      translate-context="*/*/Error"
                    >
                      The remote server answered with HTTP %{ status }
                    </translate>
                    <translate
                      v-else-if="['http', 'request'].indexOf(fetch.detail.error_code) > -1"
                      translate-context="*/*/Error"
                    >
                      An HTTP error occurred while contacting the remote server
                    </translate>
                    <translate
                      v-else-if="fetch.detail.error_code === 'timeout'"
                      translate-context="*/*/Error"
                    >
                      The remote server didn't respond quickly enough
                    </translate>
                    <translate
                      v-else-if="fetch.detail.error_code === 'connection'"
                      translate-context="*/*/Error"
                    >
                      Impossible to connect to the remote server
                    </translate>
                    <translate
                      v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(fetch.detail.error_code) > -1"
                      translate-context="*/*/Error"
                    >
                      The remote server returned invalid JSON or JSON-LD data
                    </translate>
                    <translate
                      v-else-if="fetch.detail.error_code === 'validation'"
                      translate-context="*/*/Error"
                    >
                      Data returned by the remote server had invalid or missing attributes
                    </translate>
                    <translate
                      v-else-if="fetch.detail.error_code === 'unhandled'"
                      translate-context="*/*/Error"
                    >
                      Unknown error
                    </translate>
                    <translate
                      v-else
                      translate-context="*/*/Error"
                    >
                      Unknown error
                    </translate>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </template>
        <div
          v-else-if="isCreatingFetch"
          class="ui active inverted dimmer"
        >
          <div class="ui text loader">
            <translate translate-context="Popup/*/Loading.Title">
              Requesting a fetch…
            </translate>
          </div>
        </div>
        <div
          v-else-if="isWaitingFetch"
          class="ui active inverted dimmer"
        >
          <div class="ui text loader">
            <translate translate-context="Popup/*/Loading.Title">
              Waiting for result…
            </translate>
          </div>
        </div>
        <div
          v-if="errors.length > 0"
          role="alert"
          class="ui negative message"
        >
          <h4 class="header">
            <translate translate-context="Content/*/Error message.Title">
              Error while saving settings
            </translate>
          </h4>
          <ul class="list">
            <li
              v-for="(error, key) in errors"
              :key="key"
            >
              {{ error }}
            </li>
          </ul>
        </div>
        <div
          v-else-if="fetch && fetch.status === 'pending' && pollsCount >= maxPolls"
          role="alert"
          class="ui warning message"
        >
          <h4 class="header">
            <translate translate-context="Popup/*/Message.Title">
              Refresh pending
            </translate>
          </h4>
          <p>
            <translate translate-context="Popup/*/Message.Content">
              The refresh request hasn't been processed in time by our server. It will be processed later.
            </translate>
          </p>
        </div>
      </div>
      <div class="actions">
        <button class="ui basic cancel button">
          <translate translate-context="*/*/Button.Label/Verb">
            Close
          </translate>
        </button>
        <button
          v-if="fetch && fetch.status === 'finished'"
          class="ui confirm success button"
          @click.prevent="showModal = false; $emit('refresh')"
        >
          <translate translate-context="*/*/Button.Label/Verb">
            Close and reload page
          </translate>
        </button>
      </div>
    </modal>
  </div>
</template>

<script>
import axios from 'axios'
import Modal from '~/components/semantic/Modal.vue'

export default {
  components: {
    Modal
  },
  props: { url: { type: String, required: true } },
  data () {
    return {
      fetch: null,
      isCreatingFetch: false,
      errors: [],
      showModal: false,
      isWaitingFetch: false,
      maxPolls: 15,
      pollsCount: 0
    }
  },
  methods: {
    createFetch () {
      const self = this
      this.fetch = null
      this.pollsCount = 0
      this.errors = []
      this.isCreatingFetch = true
      this.isWaitingFetch = false
      self.showModal = true
      axios.post(this.url).then((response) => {
        self.isCreatingFetch = false
        self.fetch = response.data
        self.pollFetch()
      }, (error) => {
        self.isCreatingFetch = false
        self.errors = error.backendErrors
      })
    },
    pollFetch () {
      this.isWaitingFetch = true
      this.pollsCount += 1
      const url = `federation/fetches/${this.fetch.id}/`
      const self = this
      self.showModal = true
      axios.get(url).then((response) => {
        self.isCreatingFetch = false
        self.fetch = response.data
        if (self.fetch.status === 'pending' && self.pollsCount < self.maxPolls) {
          setTimeout(() => {
            self.pollFetch()
          }, 1000)
        } else {
          self.isWaitingFetch = false
        }
      }, (error) => {
        self.errors = error.backendErrors
        self.isWaitingFetch = false
      })
    }
  }
}
</script>
