<script setup lang="ts">
    import { DocumentsType, IApiDocumentModule, IApiResponse } from '@/modules/documents/type';
    import { ELanguageLocale, valueof } from '@/UI-kit/types';
    import { computed, onMounted } from 'vue';
    import UIInfo from '@/UI-kit/components/UI/info/UIInfo.vue';
    import { useRequestHandler } from '@/UI-kit/composables';
    import { useModuleDocumentConnector } from '@/modules/documents/composables';
    import DocumentCard from '@/modules/documents/components/DocumentCard.vue';
    import { useI18n } from 'vue-i18n';
    import UILoaderV2 from '@/UI-kit/components/UI/loader/UILoaderV2.vue';

    type TApi = Pick<IApiDocumentModule, 'getDocuments'>;
    type TAvailableDoc = Exclude<valueof<typeof DocumentsType>, 'CUSTOM'>;

    const props = withDefaults(
        defineProps<{
            currentLang?: ELanguageLocale;
            api?: TApi;
            whiteDocTypeList?: TAvailableDoc[];
        }>(),
        {
            currentLang: ELanguageLocale.RU,
            api: () => ({}) as TApi,
            whiteDocTypeList: () => [],
        },
    );

    const emit = defineEmits<{
        click: [{ type: valueof<typeof DocumentsType>; doc: IApiResponse }];
        'update:loading': [boolean];
    }>();

    const { t } = useI18n();

    const moduleDocumentConnector = useModuleDocumentConnector();

    const api = computed<TApi>(() => ({ ...moduleDocumentConnector, ...props.api }));

    const availableDocumentTypeList = computed<TAvailableDoc[]>(() =>
        Object.values(DocumentsType).filter(
            (item): item is TAvailableDoc =>
                item !== DocumentsType.CUSTOM && props.whiteDocTypeList.includes(item),
        ),
    );

    const { requestHandler, isLoading, data } = useRequestHandler({
        before: async () => emit('update:loading', true),
        request: async () => api.value.getDocuments(),
        finally: async () => emit('update:loading', false),
    });

    const haveDoc = (type: TAvailableDoc) => {
        return data.value?.find((i: IApiResponse) => i.type === type) || {};
    };

    onMounted(async () => {
        await requestHandler();
    });
</script>

<template>
    <div v-if="!isLoading" class="module-documents-list__block">
        <UIInfo class="w-100" :text="t('moduleDocuments.info')" />
        <div class="module-documents-list">
            <DocumentCard
                v-for="item in availableDocumentTypeList"
                :key="item"
                :item="item"
                :doc="haveDoc(item)"
                @click="emit('click', $event)"
            />
        </div>
    </div>
    <div v-else class="module-documents-list__loader">
        <UILoaderV2 />
    </div>
</template>

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

    .module-documents-list {
        @include index.flex(column, 12px);

        width: 100%;

        &__block,
        &__card {
            width: 100%;
        }

        &__block {
            @include index.flex(column, 20px);
        }

        &__card {
            &-text {
                @include index.flex(row, 4px, center);

                flex-wrap: wrap;
            }
        }

        &__loader {
            @include index.flex(row, 0, center, center);

            min-height: 80vh;
        }
    }
</style>
