<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin" style="width: 80vw">
      <q-bar>
        Testing {{ urlAction.name }}
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
        </q-btn>
      </q-bar>

      <q-card-section>
        <q-option-group
          v-model="runAgainst"
          :options="runAgainstOptions"
          inline
          dense
        />
      </q-card-section>

      <q-card-section v-if="runAgainst === 'agent'">
        <tactical-dropdown
          v-model="agent"
          :options="agentOptions"
          label="Agents"
          mapOptions
          filterable
          dense
          filled
        />
      </q-card-section>

      <q-card-section v-else-if="runAgainst === 'site'">
        <tactical-dropdown
          v-model="site"
          :options="siteOptions"
          label="Sites"
          mapOptions
          filterable
          dense
          filled
        />
      </q-card-section>

      <q-card-section v-else-if="runAgainst === 'client'">
        <tactical-dropdown
          v-model="client"
          :options="clientOptions"
          label="Client"
          mapOptions
          filterable
          dense
          filled
        />
      </q-card-section>

      <q-card-section style="height: 60vh" class="scroll">
        <div>
          URL:
          <code>{{ return_url }}</code>
        </div>
        <br />
        <div>
          Body
          <q-separator />
          <code>{{ return_request }}</code>
        </div>
        <br />
        <div>
          Response
          <q-separator />
          <code>{{ return_result }}</code>
        </div>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="Close" v-close-popup />
        <q-btn
          :loading="loading"
          flat
          label="Run"
          color="primary"
          @click="submit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
// composition imports
import { ref, reactive, computed } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useAgentDropdown } from "@/composables/agents";
import { useSiteDropdown, useClientDropdown } from "@/composables/clients";
import { runTestURLAction } from "@/api/core";
import { URLAction } from "@/types/core/urlactions";

// ui imports
import TacticalDropdown from "@/components/ui/TacticalDropdown.vue";

// define emits
defineEmits([...useDialogPluginComponent.emits]);

// define props
const props = defineProps<{ urlAction: URLAction }>();

// setup quasar
const { dialogRef, onDialogHide } = useDialogPluginComponent();

// setup dropdowns
const { agent, agentOptions } = useAgentDropdown({ onMount: true });
const { client, clientOptions } = useClientDropdown(true);
const { site, siteOptions } = useSiteDropdown(true);

const runAgainst = ref<"agent" | "site" | "client" | "none">("none");

const runAgainstOptions = [
  { label: "Agent", value: "agent" },
  { label: "Site", value: "site" },
  { label: "Client", value: "client" },
  { label: "None", value: "none" },
];
const loading = ref(false);

const runAgainstID = computed(() => {
  if (runAgainst.value === "agent") return agent.value;
  else if (runAgainst.value === "site") return site.value;
  else if (runAgainst.value === "client") return client.value;
  else return 0;
});
const state = reactive({
  pattern: props.urlAction.pattern,
  rest_body: props.urlAction.rest_body,
  rest_headers: props.urlAction.rest_headers,
  rest_method: props.urlAction.rest_method,
  run_instance_type: runAgainst,
  run_instance_id: runAgainstID,
});

const return_url = ref("");
const return_result = ref("");
const return_request = ref("");

async function submit() {
  loading.value = true;

  try {
    const { url, result, body } = await runTestURLAction(state);

    return_result.value = result;
    return_url.value = url;
    return_request.value = body;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
}
</script>
