<script setup>
import { useLight, m } from "#imports";
const light = useLight();
defineProps({
  authentication_password_based: { type: String, required: true, default: "1" },
  authentication_google_client_id: { type: String, required: true, default: "" },
  authentication_facebook_app_id: { type: String, required: true, default: "" },
  authentication_microsoft_client_id: { type: String, required: true, default: "" },
  authentication_microsoft_tenant_id: { type: String, required: true, default: "" }
});
const emits = defineEmits(["submit"]);
const onSubmit = async (d) => {
  if (d.authentication_password_based === "0" && !d.authentication_google_client_id && !d.authentication_facebook_app_id && !d.authentication_microsoft_client_id) {
    light.notify({ message: "At least one authentication method should be enabled", color: "negative" });
    return;
  }
  emits("submit", d);
};
</script>

<template>
    <form-kit type="l-form" :bordered="false" @submit="onSubmit" :value="$props">

        <form-kit label="Password based" type="l-checkbox" name="authentication_password_based" true-value="1"
            false-value="0" />

        <div class="col-12">
            <q-separator />
        </div>

        <form-kit label="Google Client ID" type="l-input" name="authentication_google_client_id" />

        <form-kit label="Facebook App ID" type="l-input" name="authentication_facebook_app_id" />

        <form-kit label="Microsoft Client ID" type="l-input" name="authentication_microsoft_client_id" />
        <form-kit label="Microsoft Tenant ID" type="l-input" name="authentication_microsoft_tenant_id" />
    </form-kit>
</template>
