<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Skin Karakter</a>
            </li>
            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                <span>Daftar Skin Karakter</span>
            </li>
        </ul>

        <div class="grid grid-cols-1 gap-6 pt-5">
            <div class="panel">
                <div class="mb-5 flex items-center justify-between">
                    <h5 class="text-lg font-semibold dark:text-white-light">Daftar Skin Karakter</h5>
                    <NuxtLink to="/character/skins/add" class="dark:text-white-light btn btn-primary !py-1">
                        <icon-plus class="me-1" />
                        Tambah
                    </NuxtLink>
                </div>
                <div class="mb-5">
                    <input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari..." @change="changeSearch"/>
                </div>
                <div class="mb-5">
                    <div class="datatable">
                        <vue3-datatable
                            :rows="skins?.results"
                            :columns="cols"
                            :totalRows="skins?.count"
                            :isServerMode=true
                            :page="params.current_page"
                            :pageSize="params.pagesize"
                            :sortable="true"
                            :sortColumn="params.sort_column"
                            :sortDirection="params.sort_direction"
                            @change="changeServer"
                            skin="whitespace-nowrap bh-table-hover"
                            firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                            lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
                            previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                            nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                        >
                            <template #id="data">
                                <div class="flex gap-1">
                                    <button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
                                        <icon-edit class="me-1" />
                                        Edit
                                    </button>
                                    <button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
                                        <icon-trash class="me-1" />
                                        Delete
                                    </button>
                                </div>
                            </template>
                        </vue3-datatable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, computed, onMounted } from 'vue';
    import Vue3Datatable from '@bhplugin/vue3-datatable';
    useHead({ title: 'Daftar Skin Karakter' });

    const router = useRouter();
    const config = useRuntimeConfig();

    const cols =
        ref([
            { field: 'name', title: 'Nama' },
            { field: 'character.name', title: 'Karakter' },
            { field: 'id', title: 'Aksi' },
            
        ]) || [];

    const params = reactive({
        search: null,
        current_page: 1,
        pagesize: 10,
        sort_column: 'name',
        sort_direction: 'asc',
    });
    
    const { data: skins } = await useAsyncData('skins', 
        () => { 
            return $fetch(`${config.public.apiBase}/character/character-skins/`, {
                params: {
                    page: params.current_page,
                    page_size: params.pagesize,
                    ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
                    search: params.search
                }})
        }, {
            watch: [params]
        }
    );
    
    const changeServer = (data: any) => {
        params.pagesize = data.pagesize;
        params.sort_column = data.sort_column;
        params.sort_direction = data.sort_direction;
        params.current_page = data.current_page;
    };

    const changeSearch = (data: any) => {
        console.log(data);
        params.current_page = 1; 
        console.log(params);
    };

    const viewData = (data: any) => {
        router.push({ path: "/character/skins/" + data.id });
    };

    const deleteData = async (data: any) => {

        //delete data with API
        await $fetch(`${config.public.apiBase}character/character-skins/${data.id}/`, {
            method: 'DELETE'
        });

        //refersh data posts
        refreshNuxtData('skins');
    }
</script>