import { settingsSidebar } from "../settingsSidebar";

export function pageMailSettings(route) {
    app.store.title = "Mail settings";

    const tlsOptions = [
        { label: "Auto (StartTLS)", value: false },
        { label: "Always", value: true },
    ];

    const authMethods = [
        { label: "PLAIN (default)", value: "PLAIN" },
        { label: "LOGIN", value: "LOGIN" },
    ];

    const data = store({
        isLoading: false,
        isSaving: false,
        formSettings: null,
        initSerialized: "null",
        showMoreOptions: false,
        get hasChanges() {
            return data.initSerialized != JSON.stringify(data.formSettings);
        },
    });

    loadSettings();

    async function loadSettings() {
        data.isLoading = true;

        try {
            const settings = await app.pb.settings.getAll();
            init(settings);

            data.isLoading = false;
        } catch (err) {
            if (!err.isAbort) {
                app.checkApiError(err);
                // data.isLoading = false; don't reset in case of a server error
            }
        }
    }

    async function save() {
        if (data.isSaving || !data.hasChanges) {
            return;
        }

        data.isSaving = true;

        try {
            const redacted = app.utils.filterRedactedProps(data.formSettings);
            const settings = await app.pb.settings.update(redacted);
            init(settings);

            app.toasts.success("Successfully saved mail settings.");
        } catch (err) {
            app.checkApiError(err);
        }

        data.isSaving = false;
    }

    function init(settings = {}) {
        // refresh local app settings
        app.store.settings = JSON.parse(JSON.stringify(settings));

        data.formSettings = {
            meta: settings?.meta || {},
            smtp: settings?.smtp || {},
        };

        if (!data.formSettings.smtp.authMethod) {
            data.formSettings.smtp.authMethod = authMethods[0].value;
        }

        data.initSerialized = JSON.stringify(data.formSettings);
    }

    function reset() {
        data.formSettings = JSON.parse(data.initSerialized);
    }

    return t.div(
        { pbEvent: "pageMailSettings", className: "page page-mail-settings" },
        settingsSidebar(),
        t.div(
            { className: "page-content full-height" },
            t.header(
                { className: "page-header" },
                t.nav(
                    { className: "breadcrumbs" },
                    t.div({ className: "breadcrumb-item" }, "Settings"),
                    t.div({ className: "breadcrumb-item" }, () => app.store.title),
                ),
            ),
            t.div(
                { className: "wrapper m-b-base" },
                () => {
                    if (data.isLoading) {
                        return t.div({ className: "block txt-center" }, t.span({ className: "loader lg" }));
                    }

                    return t.form(
                        {
                            pbEvent: "mailSettingsForm",
                            className: "grid mail-settings-form",
                            inert: () => data.isSaving,
                            onsubmit: (e) => {
                                e.preventDefault();
                                save();
                            },
                        },
                        t.div(
                            { className: "col-lg-12 txt-lg" },
                            t.p(null, "Configure common settings for sending emails."),
                        ),
                        t.div(
                            { className: "col-lg-6" },
                            t.div(
                                { className: "field" },
                                t.label({ htmlFor: "meta.senderName" }, "Sender name"),
                                t.input({
                                    id: "meta.senderName",
                                    name: "meta.senderName",
                                    type: "text",
                                    required: true,
                                    value: () => data.formSettings.meta.senderName || "",
                                    oninput: (e) => (data.formSettings.meta.senderName = e.target.value),
                                }),
                            ),
                        ),
                        t.div(
                            { className: "col-lg-6" },
                            t.div(
                                { className: "field" },
                                t.label({ htmlFor: "meta.senderAddress" }, "Sender address"),
                                t.input({
                                    id: "meta.senderAddress",
                                    name: "meta.senderAddress",
                                    type: "email",
                                    required: true,
                                    value: () => data.formSettings.meta.senderAddress || "",
                                    oninput: (e) => (data.formSettings.meta.senderAddress = e.target.value),
                                }),
                            ),
                        ),
                        t.div(
                            { className: "col-lg-12" },
                            t.div(
                                { className: "field" },
                                t.input({
                                    id: "smtp.enabled",
                                    name: "smtp.enabled",
                                    type: "checkbox",
                                    className: "switch",
                                    checked: () => !!data.formSettings.smtp.enabled,
                                    onchange: (e) => (data.formSettings.smtp.enabled = e.target.checked),
                                }),
                                t.label(
                                    { htmlFor: "smtp.enabled" },
                                    t.span(
                                        { className: "txt" },
                                        "Use SMTP mail server ",
                                        t.strong(null, "(recommended)"),
                                    ),
                                    t.i({
                                        className: "ri-information-line link-faded",
                                        ariaDescription: app.attrs.tooltip(
                                            `By default PocketBase uses the unix "sendmail" command for sending emails. For better emails deliverability it is recommended to use a SMTP mail server.`,
                                        ),
                                    }),
                                ),
                            ),
                            // SMTP
                            app.components.slide(
                                () => data.formSettings.smtp.enabled,
                                t.div(
                                    { className: "grid m-t-sm" },
                                    t.div(
                                        { className: "col-lg-4" },
                                        t.div(
                                            { className: "field" },
                                            t.label({ htmlFor: "smtp.host" }, "SMTP server host"),
                                            t.input({
                                                id: "smtp.host",
                                                name: "smtp.host",
                                                type: "text",
                                                required: () => data.formSettings.smtp.enabled,
                                                value: () => data.formSettings.smtp.host || "",
                                                oninput: (e) => data.formSettings.smtp.host = e.target.value,
                                            }),
                                        ),
                                    ),
                                    t.div(
                                        { className: "col-lg-2" },
                                        t.div(
                                            { className: "field" },
                                            t.label({ htmlFor: "smtp.port" }, "Port"),
                                            t.input({
                                                id: "smtp.port",
                                                name: "smtp.port",
                                                type: "number",
                                                min: 0,
                                                step: 1,
                                                required: () => data.formSettings.smtp.enabled,
                                                value: () => data.formSettings.smtp.port || "",
                                                oninput: (e) =>
                                                    data.formSettings.smtp.port = parseInt(e.target.value, 10),
                                            }),
                                        ),
                                    ),
                                    t.div(
                                        { className: "col-lg-3" },
                                        t.div(
                                            { className: "field" },
                                            t.label({ htmlFor: "smtp.username" }, "Username"),
                                            t.input({
                                                id: "smtp.username",
                                                name: "smtp.username",
                                                type: "text",
                                                autocomplete: "off",
                                                value: () => data.formSettings.smtp.username || "",
                                                oninput: (e) => data.formSettings.smtp.username = e.target.value,
                                            }),
                                        ),
                                    ),
                                    t.div(
                                        { className: "col-lg-3" },
                                        t.div(
                                            { className: "field" },
                                            t.label({ htmlFor: "smtp.password" }, "Password"),
                                            t.input({
                                                id: "smtp.password",
                                                name: "smtp.password",
                                                type: "password",
                                                autocomplete: "new-password",
                                                value: () => data.formSettings.smtp.password || "",
                                                oninput: (e) => data.formSettings.smtp.password = e.target.value,
                                                onkeyup: (e) => {
                                                    if (
                                                        e.key == "Backspace"
                                                        && typeof data.formSettings.smtp.password === "undefined"
                                                    ) {
                                                        data.formSettings.smtp.password = "";
                                                    }
                                                },
                                                placeholder: () =>
                                                    typeof data.formSettings.smtp.password !== "undefined"
                                                        ? ""
                                                        : "* * * * * *",
                                            }),
                                        ),
                                    ),
                                ),
                                // additional options
                                t.button(
                                    {
                                        type: "button",
                                        className: "btn secondary sm m-t-sm",
                                        onclick: () => data.showMoreOptions = !data.showMoreOptions,
                                    },
                                    t.span(
                                        { className: "txt" },
                                        () => data.showMoreOptions ? "Hide more options" : "Show more options",
                                    ),
                                    t.i({
                                        className: () =>
                                            data.showMoreOptions ? "ri-arrow-drop-up-line" : "ri-arrow-drop-down-line",
                                    }),
                                ),
                                app.components.slide(
                                    () => data.showMoreOptions,
                                    t.div(
                                        { className: "grid m-t-sm" },
                                        t.div(
                                            { className: "col-lg-3" },
                                            t.div(
                                                { className: "field" },
                                                t.label({ htmlFor: "smtp.tls" }, "TLS encryption"),
                                                app.components.select({
                                                    id: "smtp.tls",
                                                    name: "smtp.tls",
                                                    required: true,
                                                    options: tlsOptions,
                                                    value: () => data.formSettings.smtp.tls || false,
                                                    onchange: (selected) => {
                                                        data.formSettings.smtp.tls = selected?.[0]?.value;
                                                    },
                                                }),
                                            ),
                                        ),
                                        t.div(
                                            { className: "col-lg-3" },
                                            t.div(
                                                { className: "field" },
                                                t.label({ htmlFor: "smtp.authMethod" }, "AUTH method"),
                                                app.components.select({
                                                    id: "smtp.authMethod",
                                                    name: "smtp.authMethod",
                                                    required: true,
                                                    options: authMethods,
                                                    value: () =>
                                                        data.formSettings.smtp.authMethod || authMethods[0].value,
                                                    onchange: (selected) => {
                                                        data.formSettings.smtp.authMethod = selected?.[0]?.value;
                                                    },
                                                }),
                                            ),
                                        ),
                                        t.div(
                                            { className: "col-lg-6" },
                                            t.div(
                                                { className: "field" },
                                                t.label(
                                                    { htmlFor: "smtp.localName" },
                                                    t.span({ className: "txt" }, "EHLO/HELO domain"),
                                                    t.i({
                                                        className: "ri-information-line link-hint tooltip-top",
                                                        ariaDescription: app.attrs.tooltip(
                                                            "Some SMTP servers, such as the Gmail SMTP-relay, requires a proper domain name in the inital EHLO/HELO exchange and will reject attempts to use localhost.",
                                                        ),
                                                    }),
                                                ),
                                                t.input({
                                                    id: "smtp.localName",
                                                    name: "smtp.localName",
                                                    type: "text",
                                                    placeholder: "Default to localhost",
                                                    value: () => data.formSettings.smtp.localName || "",
                                                    oninput: (e) => data.formSettings.smtp.localName = e.target.value,
                                                }),
                                            ),
                                        ),
                                    ),
                                ),
                            ),
                        ),
                        t.div({ className: "col-lg-12" }, t.hr()),
                        t.div(
                            { className: "col-lg-12" },
                            t.div(
                                { className: "flex" },
                                t.div({ className: "m-r-auto" }),
                                () => {
                                    if (data.hasChanges) {
                                        return [
                                            t.button(
                                                {
                                                    type: "button",
                                                    className: "btn transparent secondary",
                                                    onclick: reset,
                                                },
                                                t.span({ className: "txt" }, "Cancel"),
                                            ),
                                            t.button(
                                                {
                                                    className: () => `btn expanded ${data.isSaving ? "loading" : ""}`,
                                                    disabled: () => !data.hasChanges || data.isSaving,
                                                },
                                                t.span({ className: "txt" }, "Save changes"),
                                            ),
                                        ];
                                    }

                                    return t.button(
                                        {
                                            type: "button",
                                            className: () => `btn expanded outline`,
                                            onclick: () => app.modals.openMailTest(),
                                        },
                                        t.i({ className: "ri-mail-check-line" }),
                                        t.span({ className: "txt" }, "Send test email"),
                                    );
                                },
                            ),
                        ),
                    );
                },
            ),
            t.footer({ className: "page-footer" }, app.components.credits()),
        ),
    );
}