<template>
    <div class="row">
        <div class="col">
            <div class="row" v-for="service in segmentServices" :key="service.id" :data="service">
                <div class="col">
                    <segment-service-component :segment_id="item.id" :data="service" section="segmentsSection"></segment-service-component>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useQueueStore } from '@/stores/queue';

interface ServiceType {
    id: number;
    name: string;
}

interface SegmentService {
    id: number;
    name: string;
    configurations: {
        active: boolean;
        currencies: any[];
    };
}

interface Props {
    data: any;
}

const props = defineProps<Props>();

const { item } = useComponentHandler(props);
const queueStore = useQueueStore();

// const parameters = ref<any>(props.data);

const systemServices = computed(() => queueStore.getListData('serviceTypeSection'));
const segmentServices = computed<SegmentService[]>(() => item.value?.services || []);

const inArray = (element: ServiceType) => {
    return segmentServices.value.some((service) => service.id === element.id);
};

const pushIfNotExist = (element: SegmentService) => {
    if (!inArray(element)) {
        segmentServices.value.push(element);
    }
};

const handleServicesChange = (services: ServiceType[]) => {
    services.forEach((value) => addInactiveServices(value));
};

const addInactiveServices = (element: ServiceType) => {
    pushIfNotExist({
        configurations: {
            active: false,
            currencies: []
        },
        id: element.id,
        name: element.name
    });
};


// watch(
//     () => props.data,
//     (value) => {
//         console.log('Data prop changed:', value);
//         parameters.value = value;
//     },
//     { deep: true, immediate: true }
// );

watch(
    systemServices,
    handleServicesChange,
    { deep: true, immediate: true }
);

watch(
    item,
    () => {
        handleServicesChange(systemServices.value);
    },
    // { deep: true }
);

</script>
