<template>
    <div class="notificaiton-setting-bar">
        <perfect-scrollbar
            :options="{
                wheelSpeed: 1,
                swipeEasing: true,
                suppressScrollX: true,
            }"
        >
            <a-card class="page-content-container" :bodyStyle="{ paddingTop: '20px' }">
                <template #title>
                    <div :style="{ marginTop: '8px', paddingBottom: '14px' }">
                        {{ $t("mail_settings.send_mail_for") }}
                    </div>
                </template>
                <!-- <a-tabs v-model:activeKey="activeTabKey">
                    <a-tab-pane key="employee" :tab="$t('mail_settings.staff_member')" />
                    <a-tab-pane key="company" :tab="$t('mail_settings.company')" />
                </a-tabs> -->
                <a-checkbox-group
                    v-model:value="settings"
                    style="width: 100%"
                    @change="settingsChanged"
                >
                    <div v-show="activeTabKey == 'employee'">
                        <a-row>
                            <!-- Staff Member -->
                            <a-col :span="24" class="mb-5">
                                <a-typography-title :level="5">
                                    {{ $t("menu.staff_members") }}
                                    <TooltipEmployee />
                                </a-typography-title>
                            </a-col>
                            <a-col :span="24" class="mb-5">
                                <a-checkbox value="user_welcome_mail">
                                    {{ $t("mail_settings.on_welcome_mail") }}
                                </a-checkbox>
                            </a-col>
                            <a-divider />
                        </a-row>
                    </div>
                    <div v-show="activeTabKey == 'company'"></div>
                </a-checkbox-group>
            </a-card>
        </perfect-scrollbar>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { getUrlByAppType } from "../../../../../common/scripts/functions";
import TooltipCompany from "./TooltipCompany.vue";
import TooltipEmployee from "./TooltipEmployee.vue";

const props = defineProps(["sendMailSettings"]);

const { addEditRequestAdmin } = window.__composables.apiAdmin();
const { t } = useI18n();
const settings = ref([]);
const activeTabKey = ref("employee");

onMounted(() => {
    settings.value = props.sendMailSettings.credentials;
});

const settingsChanged = (checkedValue) => {
    addEditRequestAdmin({
        url: getUrlByAppType(`settings/email/send-mail-settings`),
        data: { name_key: "company", settings: checkedValue },
        success: (res) => {
            message.success(t("mail_settings.send_mail_setting_saved"));
        },
    });
};
</script>

<style lang="less">
.notificaiton-setting-bar .ps {
    height: calc(100vh - 145px);
}
</style>
