<script setup>
import { computed, ref } from "vue";
import { useDialogPluginComponent } from "quasar";
const props = defineProps({
  initialUrl: { type: String, required: false, default: "" },
  initialText: { type: String, required: false, default: "" },
  initialTitle: { type: String, required: false, default: "" },
  initialTarget: { type: String, required: false, default: "_self" }
});
defineEmits([
  ...useDialogPluginComponent.emits
]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
const url = ref(props.initialUrl);
const text = ref(props.initialText);
const title = ref(props.initialTitle);
const target = ref(props.initialTarget);
const targetOptions = [
  { label: "Current window", value: "_self" },
  { label: "New window", value: "_blank" }
];
const canSubmit = computed(() => url.value.trim().length > 0);
const onConfirm = () => {
  if (!canSubmit.value) return;
  onDialogOK({
    url: url.value.trim(),
    text: text.value.trim(),
    title: title.value.trim(),
    target: target.value
  });
};
</script>

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card style="min-width: 520px; max-width: 90vw;">
      <q-card-section class="text-h6">
        Insert/Edit Link
      </q-card-section>

      <q-card-section class="q-gutter-md">
        <q-input v-model="url" label="URL" outlined dense />
        <q-input v-model="text" label="Text to display" outlined dense />
        <q-input v-model="title" label="Title" outlined dense />
        <q-select
          v-model="target"
          label="Open link in..."
          :options="targetOptions"
          option-label="label"
          option-value="value"
          emit-value
          map-options
          outlined
          dense
        />
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="Cancel" @click="onDialogCancel" />
        <q-btn color="primary" label="Insert" :disable="!canSubmit" @click="onConfirm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
