<!--
     This file is part of the happyDomain (R) project.
     Copyright (c) 2022-2024 happyDomain
     Authors: Pierre-Olivier Mercier, et al.

     This program is offered under a commercial and under the AGPL license.
     For commercial licensing, contact us at <contact@happydomain.org>.

     For AGPL licensing:
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.

     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU Affero General Public License for more details.

     You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<script lang="ts">
    import { Container, ListGroup, Spinner } from "@sveltestrap/sveltestrap";

    import PageTitle from "$lib/components/PageTitle.svelte";
    import { getOidcProvider } from "$lib/api/auth";
    import { isAuthUser } from "$lib/api/user";
    import { userSession } from "$lib/stores/usersession";
    import { t } from "$lib/translations";

    import ChangePasswordForm from "./ChangePasswordForm.svelte";
    import DeleteAccountCard from "./DeleteAccountCard.svelte";
    import SessionsManager from "./SessionsManager.svelte";
    import UserSettingsForm from "./UserSettingsForm.svelte";

    let is_auth_user_req = $userSession.id ? isAuthUser($userSession) : false;
</script>

<svelte:head>
    <title>{$t("settings.title")} - happyDomain</title>
</svelte:head>

<Container class="my-4 pb-5">
    <PageTitle title={$t("settings.title")} subtitle={$t("settings.subtitle")} />
    {#if !$userSession.settings}
        <div class="d-flex justify-content-center">
            <Spinner color="primary" />
        </div>
    {:else}
        <h2 id="preferences" class="display-7 fw-bold mt-5">
            <i class="bi bi-sliders"></i>
            {$t("settings.preferences.title")}
        </h2>
        <p class="lead">
            {$t("settings.preferences.description")}
        </p>

        <UserSettingsForm bind:settings={$userSession.settings} />

        <h2 id="notifications" class="display-7 fw-bold mt-5">
            <i class="bi bi-bell"></i>
            {$t("settings.notifications.title")}
        </h2>
        <p class="lead">
            {$t("settings.notifications.description")}
        </p>
        <a class="btn btn-outline-primary" href="/me/notifications">
            {$t("settings.notifications.manage")}
        </a>

        {#if $userSession.email !== "_no_auth"}
            <h2 id="security" class="display-7 fw-bold mt-5">
                <i class="bi bi-shield"></i>
                {$t("settings.security.title")}
            </h2>
            <p class="lead">
                {$t("settings.security.description")}
            </p>

            <SessionsManager />

            <h3 class="fw-bold mt-5" id="password-change">
                {$t("password.change")}
            </h3>
            <p>
                {$t("settings.security.password.description")}
            </p>
            {#await is_auth_user_req}
                <div class="d-flex justify-content-center my-2">
                    <Spinner />
                </div>
            {:then res}
                {#if res}
                    <ChangePasswordForm />
                {:else}
                    {#await getOidcProvider() then oidc}
                        <div class="alert alert-secondary">
                            {$t("account.no-password-change", { provider: oidc.provider })}
                        </div>
                    {/await}
                {/if}
            {:catch}
                {#await getOidcProvider() then oidc}
                    <div class="alert alert-secondary">
                        {$t("account.no-password-change", { provider: oidc.provider })}
                    </div>
                {/await}
            {/await}

            <h2 class="display-7 fw-bold mt-5" id="delete-account">
                <i class="bi bi-x-circle"></i>
                {$t("account.delete.delete")}
            </h2>
            <p class="lead">
                {$t("account.delete.description")}
            </p>
            {#await is_auth_user_req}
                <div class="d-flex justify-content-center my-2">
                    <Spinner />
                </div>
            {:then res}
                <ListGroup>
                    <DeleteAccountCard externalAuth={!res} />
                </ListGroup>
            {:catch}
                <ListGroup>
                    <DeleteAccountCard externalAuth={true} />
                </ListGroup>
            {/await}
        {:else}
            <div class="alert alert-secondary mt-4">
                {$t("errors.account-no-auth")}
            </div>
        {/if}
    {/if}
</Container>
