<template>
    <NcSettingsSection :name="t('settings', 'Email server')" :description="t(
        'settings',
        `It is important to set up this server to be able to send emails, like for password reset and notifications.`,
    )" :doc-url="linkToDocs('admin-email')">
        <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
            {{ flash.message }}
        </NotificationBar>

        <!-- from address for sendmail -->
        <!-- <div v-show="form.mail_smtp_mode === 'sendmail'" class="flex flex-col space-y-2">
                <label for="mail_sendmailmode" class="font-medium">{{ t('settings', 'Sendmail mode') }}</label>
                <FormControl name="mail_sendmailmode" id="mail_sendmailmode" v-model="form.mailSendmailmode"
                    :options="mailSendmailmodeOptions">                
                </FormControl>
            </div> -->

        <!-- <form id="mail_general_settings_form" @submit.prevent="saveMailSettingsForm" class="space-y-6">
            <p>
                <span id="mail_settings_msg" class="text-red-500">{{ message }}</span>
            </p>

            <div class="flex flex-col space-y-2">
                <label for="mail_smtpmode" class="font-medium">{{ t('settings', 'Send mode') }}</label>
                <FormControl type="select" name="mail_smtpmode" id="mail_smtpmode" v-model="form.mail_smtp_mode"
                    @change="handleModeChange" :options="mailSmtpmodeOptions">                  
                </FormControl>
            </div>
        
            <div v-show="form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
                <label for="mail_smtpsecure" class="font-medium">{{ t('settings', 'Encryption') }}</label>
                <FormControl type="select" name="mail_smtpsecure" id="mail_smtpsecure" v-model="form.mail_smtpsecure"
                    :options="mailSmtpsecureOptions">                
                </FormControl>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="mail_from_address" class="font-medium">{{ t('settings', 'From address') }}</label>
                <div class="flex space-x-2">                   
                    <FormControl type="text" name="mail_from_address" id="mail_from_address"
                        v-model="form.mail_from_address" :placeholder="t('settings', 'Email')" class="flex-grow" />
                    <span class="text-gray-600">@</span>
                    <FormControl type="text" name="mail_domain" id="mail_domain" placeholder="example.com"
                        v-model="form.mail_domain" class="flex-grow" />
                </div>
            </div>

            <div v-show="form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
                <label for="mail_smtphost" class="font-medium">{{ t('settings', 'Server address') }}</label>
                <div class="flex space-x-2">
                    <FormControl type="text" name="mail_smtphost" id="mail_smtphost" placeholder="smtp.example.com"
                        v-model="form.mail_smtphost" class="flex-grow" />
                    <span class="text-gray-600">:</span>
                    <FormControl type="text" inputmode="numeric" name="mail_smtpport" id="mail_smtpport"
                        :placeholder="t('settings', 'Port')" v-model="form.mail_smtpport" class="flex-shrink" />
                </div>
            </div>

            <div v-show="form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
                <label for="mail_smtpauthtype" class="font-medium">{{ t('settings', 'Authentication') }}</label>
                <div class="flex items-center space-x-2">
                    <input type="checkbox" name="mail_smtpauth" id="mail_smtpauth" v-model="form.mail_smtpauth"
                        class="form-checkbox" />
                    <label for="mail_smtpauth" class="font-medium">{{ t('settings', 'Authentication required') }}
                    </label>
                </div>
            </div>

            <BaseButtons>
                <BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
                    :disabled="form.processing == true" />
            </BaseButtons>

        </form> -->

        <!-- <form id="mail_credentials_settings" class="mt-6">
            <div v-show="form.mail_smtpauth && form.mail_smtp_mode === 'smtp'" class="flex flex-col space-y-2">
                <label for="mail_smtpname" class="font-medium">{{ t('settings', 'Credentials') }}</label>
                <FormControl type="text" name="mail_smtpname" id="mail_smtpname"
                    :placeholder="t('settings', 'SMTP Login')" v-model="mail_smtpname" />
                <FormControl type="password" name="mail_smtppassword" id="mail_smtppassword"
                    placeholder="t('settings', 'SMTP Password')" v-model="mail_smtppassword" />
                <input id="mail_credentials_settings_submit" type="button" :value="t('settings', 'Save')"
                    @click="storeCredentialsForm" class="mt-2 btn btn-primary" />
            </div>
        </form> -->

        <div class="mt-6">
            <em>{{ t('settings', 'Test and verify email settings') }}</em>
            <BaseButtons>
                <BaseButton type="submit" color="info" name="testemail" id="testemail"
                    :label="t('settings', 'Test email')" @click="sendTestEmail" :small="true" />
            </BaseButtons>
            <span id="sendtestmail_msg" class="text-blue-500 ml-4">{{ testMailMessage }}</span>
        </div>

    </NcSettingsSection>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, ComputedRef, computed } from 'vue';
import { useForm, usePage } from '@inertiajs/vue3';
import NcSettingsSection from '@/Components/NcSettingsSection.vue';
import { translate as t } from '@/utils/tethyscloud-l10n';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
// import FormControl from '@/Components/FormControl.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import NotificationBar from '@/Components/NotificationBar.vue';
import { mdiAlertBoxOutline } from '@mdi/js';
import Notification from '@/utils/toast';

const flash: ComputedRef<any> = computed(() => {
    // let test = usePage();
    // console.log(test);
    return usePage().props.flash;
});


const message = ref('');
const testMailMessage = ref('');

const form = useForm({
    mail_smtp_mode: 'smtp',
    mail_smtpsecure: '',
    mailSendmailmode: 'smtp',
    mail_from_address: '',
    mail_domain: '',
    mail_smtphost: '',
    mail_smtpport: '',
    mail_smtpauthtype: 'LOGIN',
    mail_smtpauth: false,
});

const mail_smtpname = ref('');
const mail_smtppassword = ref('');

const mailSmtpmodeOptions = ref({
    'smtp': 'SMTP',
    'sendmail': 'Sendmail',
});

const mailSmtpsecureOptions = ref({
    '': 'None/STARTTLS',
    ssl: 'SSL',
});


// const mailSendmailmodeOptions = ref({
//     smtp: 'smtp (-bs)',
//     pipe: 'pipe (-t -i)',
// });

const handleModeChange = () => {
    // Logic to update visibility based on selected mailSmtpmode
};


const saveMailSettingsForm = async () => {
    // Logic to save the email server settings
    await form.post(stardust.route('settings.mail.store'));
};
const storeCredentialsForm = () => {
    // Logic to save the email credentials
};

const sendTestEmail = async () => {
    // Logic to send a test email
    try {
        const response = await axios.post(stardust.route('settings.mail.send'));

        if (response.data && response.data.success) {
            Notification.showSuccess(response.data.message);
        }
    } catch (error) {
        Notification.showError(error.message)
    }
    //             ;
    // if (response.data.success) {
    //     //   responseMessage.value = response.data.message;
    //     Notification.showSuccess(response.data.message);
    // } else {
    //     //   responseMessage.value = 'An error occurred.';
    //     Notification.showError('An error occurred.')
    // }
};

const linkToDocs = (page: string) => {
    return `https://docs.nextcloud.com/server/latest/admin_manual/configuration_server/${page}.html`;
};
</script>

<style lang="css" scoped>
.hidden {
    display: none;
}
</style>
