<template>
    <div id="accordion">
        <div>
            <div class="row bg-white padding-10 m-b-10 rounded pointer" data-toggle="collapse" :data-target="'#collapse-' + item.campaign_id" aria-expanded="true" :aria-controls="'collapse-' + item.campaign_id">
                <div class="col-2 fs-12" :id="'heading-' + item.campaign_id">{{ item.name }} : {{ item.description }}</div>
                <div class="col-1 text-success text-center">{{ item.metadata && item.metadata.length > 0 ? item.metadata[0].value : 0 }}</div>
                <div class="col-1 text-success text-center">{{ item.metadata && item.metadata.length > 0 ? extractMonth(item.metadata[0].key) : '' }}</div>
                <div class="col-1 text-center">{{ item.limit_per_month }}</div>
                <div class="col-3 fs-12">{{ item.campaign_id }}</div>
            </div>
            <div class="row bg-light collapse" :id="'collapse-' + item.campaign_id" :aria-labelledby="'heading-' + item.campaign_id" data-parent="#accordion">
                <div class="col-12">
                    <p>Past months vouchers issued</p>
                </div>
                <div class="col-12">
                    <ul class="list-unstyled">
                        <li v-for="(metadataItem, index) in item.metadata" :key="index">
                            <a class="dropdown-item" href="#">{{ metadataItem.year }} {{ extractMonth(metadataItem.key) }} - {{ metadataItem.value }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';

interface Props {
    data: Record<string, any>;
}

const props = defineProps<Props>();
const { item } = useComponentHandler(props);

const extractMonth = (inputString: string) => {
    const firstUnderscoreIndex = inputString.indexOf('_');
    if (firstUnderscoreIndex === -1) return '';

    const secondUnderscoreIndex = inputString.indexOf('_', firstUnderscoreIndex + 1);
    if (secondUnderscoreIndex === -1) return '';

    const thirdUnderscoreIndex = inputString.indexOf('_', secondUnderscoreIndex + 1);
    if (thirdUnderscoreIndex === -1) return '';

    return inputString.substring(secondUnderscoreIndex + 1, thirdUnderscoreIndex);
};
</script>
