<script setup>
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow, FwbDropdown } from 'flowbite-vue';
import { DottedMenu, EditIcon, TrashBinIcon } from '@/Utilities/Icons';
import DialogModal from '@/Components/DialogModal.vue';
import { onMounted, ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import Multiselect from 'vue-multiselect';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import ActionMessage from '@/Components/ActionMessage.vue';

const props = defineProps({
    actions: Array,
    decisions: Array,
    segments: Array
});

const menuDropdown = ref();

const drawerEdit = ref(false);
const drawerCreate = ref(false);

const selectOptions = ref([]);
const segmentOptions = ref([]);

const form = useForm({
    id: 0,
    name: '',
    color_tag: '',
    segment_id: null,
    decisions: []
});

const createForm = useForm({
    name: '',
    color_tag: '',
    segment_id: null,
    decisions: []
});

const openEditDrawer = (item) => {
    form.decisions = [];
    form.id = item.id;
    form.name = item.name;
    form.color_tag = item.color_tag;
    form.segment_id = item.segment ? item.segment.id : null;
    drawerEdit.value = true;

    item.decisions.forEach((d) => {
        form.decisions.push({
            name: d.name,
            id: d.id
        });
    })
}

const closeEditDrawer = () => {
    drawerEdit.value = false;
    form.reset();
}

const openCreateDrawer = () => {
    createForm.reset();
    drawerCreate.value = true;
}

const closeCreateDrawer = () => {
    drawerCreate.value = false;
    createForm.reset();
}

const onColorPickerChange = () => {
    console.log(form.color_tag);
}

onMounted(() => {
    props.decisions.forEach((d) => {
        selectOptions.value.push({
            name: d.name,
            id: d.id
        });

    });
    props.segments.forEach((s) => {
        segmentOptions.value.push({
            name: s.name,
            id: s.id
        })
    })
  
});

const update = () => {
    form.put(route('settings.actions.update', { id: form.id }), {
        onSuccess: () => {
            closeEditDrawer();
        },
    });
};

const store = () => {
    createForm.post(route('settings.actions.store'), {
        onSuccess: () => {
            closeCreateDrawer();
        },
    });
};

</script>
<template>
    <div class="py-4 px-3">
        <PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
    </div>
    <fwb-table>
        <fwb-table-head>
            <fwb-table-head-cell>#</fwb-table-head-cell>
            <fwb-table-head-cell>Name</fwb-table-head-cell>
            <fwb-table-head-cell>Color tag</fwb-table-head-cell>
            <fwb-table-head-cell>Decisions</fwb-table-head-cell>
            <fwb-table-head-cell>
                <span class="sr-only">Edit</span>
            </fwb-table-head-cell>
        </fwb-table-head>
        <fwb-table-body>
            <fwb-table-row v-for="act in actions" :key="act.id">
                <fwb-table-cell>{{ act.id }}</fwb-table-cell>
                <fwb-table-cell>{{ act.name }}</fwb-table-cell>
                <fwb-table-cell>{{ act.color_tag }}</fwb-table-cell>
                <fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
                <fwb-table-cell>
                    <button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
                </fwb-table-cell>
            </fwb-table-row>
        </fwb-table-body>
    </fwb-table>
    <DialogModal
        :show="drawerEdit"
        @close="closeEditDrawer"
    >

        <template #title>
            <span>Spremeni akcijo</span>
        </template>
        <template #content>
            <form @submit.prevent="update">
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="name" value="Ime"/>
                    <TextInput 
                        id="name"
                        ref="nameInput"
                        v-model="form.name"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="name"
                    />
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="colorTag" value="Barva"/>
                    <div class="mt-1 w-full border flex p-1">
                        <TextInput 
                            id="colorTag"
                            ref="colorTagInput"
                            v-model="form.color_tag"
                            @change="onColorPickerChange"
                            type="color"
                            class="mr-2" 
                            autocomplete="color-tag"
                        />
                        <span>{{ form.color_tag }}</span>
                    </div>
                </div>
                
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="segmentEdit" value="Segment"/>
                    <multiselect 
                        id="segmentEdit"
                        v-model="form.segment_id"
                        :options="segmentOptions.map(s=>s.id)"
                        :multiple="false"
                        :searchable="true"
                        :taggable="false"
                        placeholder="Izberi segment"
                        :custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="decisions" value="Odločitve"/>
                    <multiselect 
                        id="decisions"
                        ref="decisionsSelect"
                        v-model="form.decisions" 
                        :options="selectOptions"
                        :multiple="true"
                        track-by="id"
                        :taggable="true"
                        placeholder="Dodaj odločitev"
                        label="name"
                    />
                </div>

                <div class="flex justify-end mt-4">
                    <ActionMessage :on="form.recentlySuccessful" class="me-3">
                        Shranjuje.
                    </ActionMessage>

                    <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                        Shrani
                    </PrimaryButton>
                </div>
            </form>
        </template>
    </DialogModal>

    <DialogModal
        :show="drawerCreate"
        @close="closeCreateDrawer"
    >
        <template #title>
            <span>Dodaj akcijo</span>
        </template>
        <template #content>
            <form @submit.prevent="store">
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="nameCreate" value="Ime"/>
                    <TextInput 
                        id="nameCreate"
                        v-model="createForm.name"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="name"
                    />
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="colorTagCreate" value="Barva"/>
                    <div class="mt-1 w-full border flex p-1">
                        <TextInput 
                            id="colorTagCreate"
                            v-model="createForm.color_tag"
                            type="color"
                            class="mr-2" 
                            autocomplete="color-tag"
                        />
                        <span>{{ createForm.color_tag }}</span>
                    </div>
                </div>
                
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="segmentCreate" value="Segment"/>
                    <multiselect 
                        id="segmentCreate"
                        v-model="createForm.segment_id"
                        :options="segmentOptions.map(s=>s.id)"
                        :multiple="false"
                        :searchable="true"
                        :taggable="false"
                        placeholder="Izberi segment"
                        :custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="decisionsCreate" value="Odločitve"/>
                    <multiselect 
                        id="decisionsCreate"
                        v-model="createForm.decisions" 
                        :options="selectOptions"
                        :multiple="true"
                        track-by="id"
                        :taggable="true"
                        placeholder="Dodaj odločitev"
                        label="name"
                    />
                </div>

                <div class="flex justify-end mt-4">
                    <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
                        Shranjuje.
                    </ActionMessage>

                    <PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
                        Dodaj
                    </PrimaryButton>
                </div>
            </form>
        </template>
    </DialogModal>
</template>