<!--
  - Copyright 2014-2018 the original author or authors.
  -
  - Licensed under the Apache License, Version 2.0 (the "License");
  - you may not use this file except in compliance with the License.
  - You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<template>
  <div class="modal is-active">
    <div class="modal-background" @click="abort"/>
    <div class="modal-content">
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title" v-text="name"/>
        </header>

        <template v-if="state === 'input-args'">
          <section class="modal-card-body" @keyup.ctrl.enter="invoke(args)">
            <div class="field" v-for="(arg, idx) in descriptor.args" :key="arg.name">
              <label class="label">
                <span v-text="arg.name"/>
                <small class="is-muted has-text-weight-normal" v-text="arg.type"/>
              </label>
              <div class="control">
                <input type="text" class="input" v-model="args[idx]">
              </div>
              <p class="help" v-text="arg.desc"/>
            </div>
          </section>
          <footer class="modal-card-foot">
            <div class="field is-grouped is-grouped-right">
              <div class="control">
                <button class="button is-primary" @click="invoke(args)">Execute</button>
              </div>
            </div>
          </footer>
        </template>

        <template v-else-if="state === 'executing'">
          <section class="modal-card-body">
            <section class="section is-loading">
              <p>Executing...</p>
            </section>
          </section>
        </template>

        <template v-else-if="state === 'completed'">
          <section class="modal-card-body">
            <div class="message is-success">
              <div class="message-body">
                <strong>Execution successful.</strong>
              </div>
            </div>
            <pre v-text="result"/>
          </section>
          <footer class="modal-card-foot">
            <div class="field is-grouped is-grouped-right">
              <div class="control">
                <button class="button is-light" @click="abort"> Close</button>
              </div>
            </div>
          </footer>
        </template>

        <template v-else-if="state === 'failed'">
          <section class="modal-card-body">
            <div class="message is-danger">
              <div class="message-body">
                <strong>
                  <font-awesome-icon class="has-text-danger"
                                     icon="exclamation-triangle"/>
                  Execution failed.
                </strong>
                <p v-text="error.message"/>
              </div>
            </div>
            <pre v-if="error.stacktrace"
                 v-text="error.stacktrace"/>
            <pre v-if="error.response && error.response.data"
                 v-text="error.response.data"/>
          </section>
          <footer class="modal-card-foot">
            <div class="field is-grouped is-grouped-right">
              <div class="control">
                <button class="button is-light" @click="abort"> Close</button>
              </div>
            </div>
          </footer>
        </template>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: {
      name: {
        type: String,
        required: true
      },
      descriptor: {
        type: Object,
        required: true
      },
      value: {
        type: null,
        default: null
      },
      onClose: {
        type: Function,
        required: true
      },
      onExecute: {
        type: Function,
        required: true
      }
    },
    data: () => ({
      state: null,
      error: null,
      args: null,
      result: null
    }),
    computed: {},
    methods: {
      abort() {
        this.onClose();
      },
      invoke(args) {
        this.state = (args || this.descriptor.args.length === 0) ? 'prepared' : 'input-args';
        this.args = args || new Array(this.descriptor.args.length);
        this.error = null;
        this.result = null;

        if (this.state === 'prepared') {
          this.execute()
        }
      },
      async execute() {
        this.state = 'executing';
        try {
          const result = await this.onExecute(this.args);
          if (result.data.status < 400) {
            this.result = JSON.stringify(result.data.value, null, 4);
            this.state = 'completed';
          } else {
            const error = new Error(`Execution failed: ${result.data.error}`);
            error.stacktrace = result.data.stacktrace;
            this.state = 'failed';
            this.error = error;
            console.warn('Invocation failed', error);
          }
        } catch (error) {
          this.state = 'failed';
          this.error = error;
          console.warn('Invocation failed', error);
        }
      },
      keyHandler(event) {
        if (event.keyCode === 27) {
          this.abort()
        }
      }
    },
    created() {
      this.invoke();
    },
    mounted() {
      document.addEventListener('keyup', this.keyHandler)
    },
    beforeDestroy() {
      document.removeEventListener('keyup', this.keyHandler)
    },
  }
</script>