<template>
    <XModalWindow
        ref="dialog"
        :width="400"
        @close="dialog!.close()"
        @closed="$emit('closed')"
    >
        <template #header>{{ i18n.ts.signup }}</template>

        <div class="_monolithic_">
            <div class="_section">
                <XSignup
                    :auto-set="autoSet"
                    @signup="onSignup"
                    @signup-email-pending="onSignupEmailPending"
                />
            </div>
        </div>
    </XModalWindow>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import {} from "vue";
import XSignup from "@/components/MkSignup.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import { i18n } from "@/i18n";

const props = withDefaults(
    defineProps<{
        autoSet?: boolean;
    }>(),
    {
        autoSet: false,
    },
);

const emit = defineEmits<{
    (ev: "done"): void;
    (ev: "closed"): void;
}>();

const dialog = ref<InstanceType<typeof XModalWindow>>();

function onSignup(res) {
    emit("done", res);
    dialog.value?.close();
}

function onSignupEmailPending() {
    dialog.value?.close();
}
</script>
