<template>
    <a-modal
        :visible="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('currency.name')"
                        name="name"
                        :help="rules.name ? rules.name.message : null"
                        :validateStatus="rules.name ? 'error' : null"
                        class="required"
                    >
                        <a-input
                            v-model:value="formData.name"
                            :placeholder="
                                $t('common.placeholder_default_text', [
                                    $t('currency.name'),
                                ])
                            "
                        />
                    </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('currency.symbol')"
                        name="symbol"
                        :help="rules.symbol ? rules.symbol.message : null"
                        :validateStatus="rules.symbol ? 'error' : null"
                        class="required"
                    >
                        <a-input
                            v-model:value="formData.symbol"
                            :placeholder="
                                $t('common.placeholder_default_text', [
                                    $t('currency.symbol'),
                                ])
                            "
                        />
                    </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('currency.position')"
                        name="position"
                        :help="rules.position ? rules.position.message : null"
                        :validateStatus="rules.position ? 'error' : null"
                    >
                        <a-radio-group v-model:value="formData.position">
                            <a-radio value="front">
                                {{ $t("currency.front") }}
                                ({{ $t("currency.front_position_example") }})
                            </a-radio>
                            <a-radio value="behind">
                                {{ $t("currency.behind") }}
                                ({{ $t("currency.behind_position_example") }})
                            </a-radio>
                        </a-radio-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('currency.code')"
                        name="code"
                        :help="rules.code ? rules.code.message : null"
                        :validateStatus="rules.code ? 'error' : null"
                        class="required"
                    >
                        <a-input
                            v-model:value="formData.code"
                            :placeholder="
                                $t('common.placeholder_default_text', [
                                    $t('currency.code'),
                                ])
                            "
                        />
                    </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>
import { defineComponent } from "vue";
import { PlusOutlined, LoadingOutlined, SaveOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import apiAdmin from "../../../../../common/composable/apiAdmin";
import common from "../../../../../common/composable/common";

export default defineComponent({
    props: [
        "formData",
        "data",
        "visible",
        "url",
        "addEditType",
        "pageTitle",
        "successMessage",
    ],
    emits: ["addEditSuccess"],
    components: {
        PlusOutlined,
        LoadingOutlined,
        SaveOutlined,
    },
    setup(props, { emit }) {
        const { addEditRequestAdmin, loading, rules } = apiAdmin();
        const { appSetting } = common();
        const store = useStore();

        const onSubmit = () => {
            addEditRequestAdmin({
                url: props.url,
                data: props.formData,
                successMessage: props.successMessage,
                success: (res) => {
                    // If changed currency is company currency
                    if (
                        appSetting.value.currency &&
                        appSetting.value.currency.xid == res.xid
                    ) {
                        store.dispatch("auth/updateApp");
                    }

                    emit("addEditSuccess", res.xid);
                },
            });
        };

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

        return {
            loading,
            rules,
            onClose,
            onSubmit,

            drawerWidth: window.innerWidth <= 991 ? "90%" : "45%",
        };
    },
});
</script>
