<template>
    <div class="row m-b-10 parentContainer align-items-center b-b p-b-10 p-t-5" style="border-color: #e0e0e0 !important;">
        <div class="col-2">
            <div class="font-heading fs-10 bold">{{item.campaign_name}}</div>
            <div class="font-heading fs-9 text-info">{{item.code}}</div>
        </div>
        <div class="col-4">
            <div class="input-group input-group-sm">
                <span class="copyLink font-heading fs-10 text-primary pointer" @click="copyLink">Copy link</span>
            </div>
            <div class="font-heading fs-9 hint-text" v-if="item.campaign_description" :title="item.campaign_description">
                {{ item.campaign_description.length > 30 ? item.campaign_description.substring(0, 30) + '...' : item.campaign_description }}
            </div>
        </div>
        <div class="col-3">
            <div class="row">
                <div class="col-4">
                    <div class="font-heading fs-10 bold">{{item.clicks_count || 0}}</div>
                </div>
                <div class="col-4">
                    <div class="font-heading fs-10 bold">{{item.registrations_count || 0}}</div>
                </div>
                <div class="col-4">
                    <div class="font-heading fs-10 bold">{{item.orders_count || 0}}</div>
                </div>
            </div>
        </div>
        <div class="col-1">
            <span class="badge" :class="(item.is_active === true || item.is_active === 1 || item.is_active === '1' || item.is_active === 'true') ? 'badge-success' : 'badge-secondary'">
                {{ (item.is_active === true || item.is_active === 1 || item.is_active === '1' || item.is_active === 'true') ? 'Active' : 'Inactive' }}
            </span>
        </div>
        <div class="col-auto">
            <button class="btn btn-xs btn-primary b-rad-none requestModal" data-type="createModal">
                <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-xs btn-outline-danger b-rad-none m-l-5 requestModal" data-type="deleteAffiliate">
                <i class="fa fa-times"></i>
            </button>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAffiliate">
                <delete-affiliate-form-component :data="item" :section="section" class="text-center"></delete-affiliate-form-component>
            </modal-component>
            <modal-form-component size="large" section="affiliatesSection">
                <template #form="{ section }">
                    <affiliate-form-component :data="data" :section="section"></affiliate-form-component>
                </template>
            </modal-form-component>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useNotificationStore } from '@/stores/notification';

interface Props {
    data: any;
    section?: string;
}

const props = withDefaults(defineProps<Props>(), {
    section: 'affiliatesSection'
});

const { item } = useComponentHandler(props);
const notificationStore = useNotificationStore();

const trackingLink = computed(() => {
    if (item.value?.code) {
        return `${window.location.origin}/signup?tracking=${item.value.code}`;
    }
    return '';
});

const copyLink = () => {
    if (!trackingLink.value) return;

    navigator.clipboard.writeText(trackingLink.value).then(() => {
        notificationStore.createNotification({
            title: 'Success',
            message: 'Tracking link copied to clipboard',
            type: 'success'
        });
    });
};
</script>
