import {reactive, ref} from "vue";
import axios from "axios";
import {timeFormatter} from "@/helpers/TimeFormatter.ts";
import {deleteSmartBlock, getSmartBlock, SmartBlockTableHeader} from "@models/smartblock/smartblock.ts";
import {showTableHeader} from "@models/show/show.ts";
import {useAuthStore} from "@/stores/auth.store.ts";

export function blocks_page() {
    const items     = ref([])
    const selected  = ref([])
    const loading   = ref(false)
    const search    = ref('')
    const listData  = reactive({
        'itemsPerPage': 5,
        'first_page': null,
        'last_page': null,
        'total_items': 0,
        'page': 1,
    })

    const auth = useAuthStore();
    const timezone = auth.userData.timezone;

    const headers = SmartBlockTableHeader;

    const getItems = async (options) => {
        loading.value = true;
        return getSmartBlock({
            page: options.page,
            per_page: options.itemsPerPage,
            all: search.value
        }).then((smartblockList) => {
            console.log(smartblockList)
            listData.itemsPerPage = smartblockList.per_page;
            listData.first_page   = smartblockList.from;
            listData.last_page    = smartblockList.last_page;
            listData.page         = smartblockList.current_page;
            listData.total_items  = smartblockList.total;

            items.value = smartblockList.data.map(el => {
                el.visible_length = timeFormatter(el.length);
                const timezone = auth.userData.timezone;
                el.utime = new Date(el.utime).toLocaleString("it-IT", {timeZone: timezone});
                return el;
            });
            loading.value = false;

        }).catch((error) => {
            console.log("Error: "+error);
        })
    }

    const editItem = async (item) => {
        loading.value = true;
        let url = '/smartblock'
        if (item.id > 0) {
            item['_method'] = 'PUT'
            url = `smartblock/${item.id}/`
        }

        console.log(url)

        return await axios.post(
            url,
            item
        ).then((response) => {
            console.log(response)
            loading.value = false
            return response.data
        }).catch((error) => {
            console.log("Error: "+error);
        })
    }

    const deleteItem = (id) => {

        return axios.post(`smartblock/${id}`, {
            _method: 'DELETE'
        }).then((response) => {
            getItems(listData)
            // items.value = response.status === 200 ? items.value.filter(obj => obj.id !== id) : items
        })
    }

    const getTracklist = async (item) => {
        let params = null;
        if (item.id === 0) {
            params = item
        }
        return await axios.post(
            `/smartblock/${item.id}/tracks`,
            item
        ).then((response) => {
            console.log(response.data)
            return { files: response.data.list, length: response.data.length }
        }).catch((error) => {
            console.log("Error: "+error);
        })
    }

    return { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem, getTracklist }
}