<template>
  <Dialog
    ref="dialog"
    v-bind="$attrs"
    :disabled="disabled"
    :onConfirm="this.onSubmit ? handleConfirm : null"
    @closed="handleClear"
  >
    <template #trigger>
      <slot name="trigger" />
    </template>
    <Form v-bind="$attrs" ref="form" v-model="form" :disabled="disabled">
      <slot name="default" />
    </Form>
    <template #footer>
      <slot name="footer" />
    </template>
  </Dialog>
</template>

<script>
import Dialog from "../Dialog.vue";
import Form from "./Form.vue";

export default {
  name: "DialogForm",
  components: { Dialog, Form },
  props: {
    title: {
      type: String,
    },
    onSubmit: {
      type: Function,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        selections: [],
      },
    };
  },
  methods: {
    open() {
      this.$refs.dialog.open();
    },
    handleClear() {
      this.form = {
        selections: [],
      };
      this.$emit("closed");
    },
    async handleConfirm() {
      await this.$refs.form.validate();
      return this.onSubmit(this.form);
    },
  },
};
</script>

<style></style>
