<template>
    <a-modal
        :open="visible"
        :closable="false"
        :centered="true"
        :title="pageTitle"
        @ok="onSubmit"
    >
        <a-form layout="vertical">
            <a-row :gutter="16">
                <a-col :xs="24" :sm="24" :md="24" :lg="24">
                    <a-form-item
                        :label="$t('langs.name')"
                        name="name"
                        :help="rules.name ? rules.name.message : null"
                        :validateStatus="rules.name ? 'error' : null"
                        class="required"
                    >
                        <a-input-group compact style="display: flex">
                            <a-select
                                v-model:value="formData.flag_code"
                                style="width: 80px"
                                show-search
                                :filter-option="filterCountryOption"
                            >
                                <a-select-option
                                    v-for="country in countryOptions"
                                    :key="country.code"
                                    :value="country.code"
                                    :label="country.label"
                                    :filterLabel="country.filterLabel"
                                >
                                    {{ country.label }}
                                </a-select-option>
                            </a-select>
                            <a-input
                                v-model:value="formData.name"
                                :placeholder="
                                    $t('common.placeholder_default_text', [$t('langs.name')])
                                "
                                style="flex: 1"
                            />
                        </a-input-group>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :xs="24" :sm="24" :md="24" :lg="24">
                    <a-form-item
                        :label="$t('langs.is_rtl')"
                        name="is_rtl"
                        :help="rules.is_rtl ? rules.is_rtl.message : null"
                        :validateStatus="rules.is_rtl ? 'error' : null"
                    >
                        <a-switch
                            v-model:checked="formData.is_rtl"
                            :checkedValue="true"
                            :unCheckedValue="false"
                        />
                        <span style="margin-left: 10px">
                            {{ formData.is_rtl ? $t('langs.rtl') : $t('langs.ltr') }}
                        </span>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #footer>
            <a-button key="submit" type="primary" :loading="loading" @click="onSubmit">
                <template #icon>
                    <SaveOutlined />
                </template>
                {{ addEditType == "add" ? $t("common.create") : $t("common.update") }}
            </a-button>
            <a-button key="back" @click="onClose">
                {{ $t("common.cancel") }}
            </a-button>
        </template>
    </a-modal>
</template>
<script setup>
import { computed, watch } from "vue";
import { SaveOutlined } from "@ant-design/icons-vue";
import { useAuthStore } from "../../../../../../main/store/authStore";
import { countryCodes, getFlagEmoji, filterCountryOption, detectUserCountry } from "../../../../../../common/scripts/countryCodes";
import { clearTranslationCache } from "../../../../../../common/i18n";

const props = defineProps([
    "formData",
    "data",
    "visible",
    "url",
    "addEditType",
    "pageTitle",
    "successMessage",
]);

const emit = defineEmits(["addEditSuccess", "closed"]);

const { addEditRequestAdmin, loading, rules } = window.__composables.apiAdmin();
const authStore = useAuthStore();

const countryOptions = computed(() => {
    return countryCodes.map((country) => ({
        code: country.code,
        label: getFlagEmoji(country.code),
        filterLabel: `${country.name} ${country.code}`,
    }));
});

// Set default flag_code based on user's country when adding new language
watch(
    () => props.visible,
    (newVal) => {
        if (newVal && props.addEditType === "add" && !props.formData.flag_code) {
            props.formData.flag_code = detectUserCountry();
        }
    }
);

const onSubmit = () => {
    addEditRequestAdmin({
        url: props.url,
        data: props.formData,
        successMessage: props.successMessage,
        success: (res) => {
            emit("addEditSuccess", res.xid);
            authStore.updateAllLangsAction();
            clearTranslationCache();
        },
    });
};

const onClose = () => {
    rules.value = {};
    emit("closed");
};
</script>
