<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { DEFAULT_QUERY_DROP, getInputValue } from '@/utils/parseSQL';

const props = defineProps<{
    dataResult?: any
    dataType?: any
    dataQuery?: any
    layout?: string
}>()

const LAYOUT_PARSE = computed(() => {
    const parseLayout = props.layout?.split('-')?.map((_layout : any) => {
        const parseItem = _layout.split(':')
        return {
            [parseItem[0]]: parseItem[0] === 'HIDE' ? parseItem[1].split(',') : parseItem[1],
        };
    }) || [];
    return Object.assign({}, ...parseLayout);
})

const emit = defineEmits(['selectComponent', 'dropData']);

const selectComponent = () => {
    emit('selectComponent');
}

const parseData = computed(() => {
    if(!props.dataResult) return 
    const result = getInputValue(props.dataResult, 'OBJECT');
    return result
}) 

const drop = (e: any) => {
    if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
        const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
        const { dataType, dataResult } = JSON.parse(data);
        const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
        emit('dropData', { 
            dataType,
            dataResult, 
            dataQuery: dataQuery,
        });
    }
}
</script>

<template>
    <article class="basic-article" :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop">
        <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail">
            <template v-if="parseData">
                <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
            </template>
            <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px;"></span>
        </div>
        <div class="basic-article_content" :class="[!parseData && 'no-data']">
            <div>
                <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 text-truncate-two-lines">
                    <template v-if="parseData">
                        {{ parseData.title?.replace(/<[^>]+>/g, '') }}
                    </template>
                    <span v-else class="empty-block" style="height: 8px;"></span>
                </h3>
                <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 text-truncate-two-lines">
                    <template v-if="parseData">
                        {{ parseData.intro?.replace(/<[^>]+>/g, '') }}
                    </template>
                    <span v-else class="empty-block" style="height: 5px;"></span>
                </p>
            </div>
        </div>
    </article>
</template>

<style lang="scss" scoped>
.basic-article {
    display: grid;
    gap: 10px;
    height: 100%;

    &.no-data {
        gap: 5px !important;
    }

    &.vertical {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    &.horizontal {
        grid-template-columns: 1fr 1fr;

        &.reverse {
            .basic-article_thumbnail {
                grid-column: 2;
            }

            .basic-article_content {
                grid-row: 1;
            }
        }
    }

    &_thumbnail {
        flex: 1;

        img {
            width: 100%;
            border-radius: 6px;
            aspect-ratio: 16/10;
        }
    }

    &_content {
        padding: 10px 0px;

        &.no-data {
            padding: 0px;
        }

        h3 {
            font-size: 15px;
        }

        p {
            font-size: 12px;
            margin-top: 10px;
        }
    }

    .empty-block {
        background-color: #409eff;
        height: 100px;
        display: block;
    }
}
</style>
