<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row m-b-10">
                        <div class="col">
                            <h3 class="all-caps m-b-5 bold no-margin">Assign Segment</h3>
                            <div class="fs-11">Select a segment to view annoucment with title <span class="bold">{{truncate(parameters.title, 10)}}</span></div>
                        </div>
                    </div>
                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
                        <div class="col">
                            <small class="bold fs-10 text-danger">{{error}}</small>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <validation-wrapper-component selectable :validator="v$.parameters.segment_id">
                                <label>Segment</label>
                                <selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" :section="'segmentsListSection_'+data.id" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component>
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Not Now</div>
                        </div>
                        <div class="col p-l-5">
                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.announcement.segment.assign', data.id), 'post', section, true, false)">Assign Segment</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useFormHandler } from '@/composables/useFormHandler';
import route from '@/general/functions/router';

const props = defineProps<{
    section: string;
    data: any;
}>();

const { item } = useComponentHandler(props);
const { isLoading, error, parameters, submit } = useFormHandler(props);

const rules = {
    parameters: {
        segment_id: { required },
    },
};
const v$ = useVuelidate(rules, { parameters });

const currentSegmentIds = computed(() =>
    (item.value.segments || []).map((value: any) => value.id)
);

const truncate = (str: string, n: number): string =>
    str?.length > n ? str.slice(0, n) + '...' : str;
</script>
