<script setup lang="ts">
    import {
        DocumentsType,
        IApiRequestPassport,
        IApiRequestPatent,
        IApiResponse,
    } from '@/modules/documents/type';
    import { UIColorName, UIIconsValues, valueof } from '@/UI-kit/types';
    import UIBlockCardType1 from '@/UI-blocks/components/BlockCard/UIBlockCardType1.vue';
    import { UIColor, UIIcons } from '@/UI-kit/constants';
    import UIChip from '@/UI-kit/components/UI/chip/UIChip.vue';
    import { useUiKitI18n } from '@/configs';
    import { computed } from 'vue';

    const props = withDefaults(
        defineProps<{
            item: valueof<typeof DocumentsType>;
            doc?: IApiResponse;
        }>(),
        {
            doc: () => ({}) as IApiResponse,
        },
    );

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

    const CHECK_FIELDS = {
        [DocumentsType.NONRESIDENT_PASSPORT]: {
            last_name: '',
            first_name: '',
            middle_name: '',
            birth_date: '',
            seria: '',
            number: '',
            issue_date: '',
            citizenship: '',
            sex: '',
        },
        [DocumentsType.PATENT]: {
            seria: '',
            number: '',
            issue_date: '',
            blank_seria: '',
            blank_number: '',
            paid_until: '',
        },
    };

    const ICONS = {
        [DocumentsType.LICENCE_PLATE]: UIIcons.Car,
        [DocumentsType.DRIVERS_LICENSE]: UIIcons.CarUnderline,
        [DocumentsType.RVP]: UIIcons.Card,
        [DocumentsType.VNG]: UIIcons.File,
        [DocumentsType.INN]: UIIcons.Inn,
        [DocumentsType.MEDICAL_BOOK]: UIIcons.Medical,
        [DocumentsType.NONRESIDENT_PASSPORT]: UIIcons.Passport,
        [DocumentsType.PATENT]: UIIcons.Patent,
    };

    const { t } = useUiKitI18n();

    const cardIcon = computed<UIIconsValues>(() => ICONS[props.item]);

    const docType = computed(() => props.doc?.type || props.item);

    const isHaveDoc = computed(() => !!Object.keys(props.doc).length);

    const isCompletelyFilledFields = computed(() => {
        const docValues = (
            CHECK_FIELDS[docType.value]
                ? Object.assign(CHECK_FIELDS[docType.value], props.doc?.value)
                : {}
        ) as valueof<Pick<IApiRequestPatent | IApiRequestPassport, 'value'>>;

        return Object.entries(docValues)
            .filter(([key]) => key !== 'middle_name')
            .every(([, value]) => !!value);
    });

    const getChip = computed(() => {
        if (!isHaveDoc.value) {
            return {
                text: t('moduleDocuments.chips.empty'),
                bgColor: UIColor[UIColorName.Red50],
                color: UIColor[UIColorName.Red600],
            };
        }

        if (CHECK_FIELDS[docType.value] && !isCompletelyFilledFields.value) {
            return {
                text: t('moduleDocuments.chips.partial_empty'),
                bgColor: UIColor[UIColorName.Orange50],
                color: UIColor[UIColorName.Orange500],
            };
        }

        return null;
    });

    const choiceDoc = () => {
        emit('click', { type: props.item, doc: props.doc });
    };
</script>

<template>
    <UIBlockCardType1
        :left-icon="cardIcon"
        :right-icon="UIIcons.ChevronRight"
        class="module-documents-list__card"
        @click="choiceDoc"
    >
        <div class="module-documents-list__card-text">
            {{ t(`moduleDocuments.availableDocuments.${item}`) }}
            <UIChip v-if="getChip" v-bind="getChip" />
        </div>
    </UIBlockCardType1>
</template>

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

    .module-documents-list {
        &__card {
            width: 100%;

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

                flex-wrap: wrap;
            }
        }
    }
</style>
