<script lang="ts" setup>
    import UIButton from '@/UI-kit/components/UI/button/UIButton.vue';
    import { UIColor } from '@/UI-kit/constants';
    import { UIColorName } from '@/UI-kit/types';
    import { useUIModalStore } from '@/UI-kit/store';
    import { useRequestHandler } from '@/UI-kit/composables';
    import { IApiDocumentModule } from '@/modules/documents';
    import { useUiKitI18n } from '@/configs';

    const props = defineProps<{
        api: IApiDocumentModule;
        id: number;
    }>();

    const emit = defineEmits<{
        'remove:document': [number];
        close: [void];
    }>();

    const { closeModal } = useUIModalStore();

    const { t } = useUiKitI18n();

    const { requestHandler, isLoading } = useRequestHandler({
        request: async (id: number) => await props.api.deleteDocument(id),
        then: async () => {
            emit('remove:document', props.id);
            emit('close');
        },
    });
</script>

<template>
    <div class="delete-document-modal">
        <div v-html="t('moduleDocuments.modal.removeDocument.text')" />
        <UIButton
            :color="UIColor[UIColorName.Red075]"
            :bg-color="UIColor[UIColorName.Red1]"
            :is-loading="isLoading"
            @click="requestHandler(id)"
        >
            {{ t('moduleDocuments.modal.removeDocument.btn.remove') }}
        </UIButton>
        <UIButton
            :color="UIColor[UIColorName.Blue500]"
            :bg-color="UIColor[UIColorName.Blue1]"
            @click="closeModal()"
        >
            {{ t('moduleDocuments.modal.removeDocument.btn.cancel') }}
        </UIButton>
    </div>
</template>

<style lang="scss" scoped>
    @use '@/UI-kit/assets/scss/mixins/index.mixin';

    .delete-document-modal {
        @include index.text(14px, 400, 20px);
        @include index.flex(column, 16px);
    }
</style>
