import {reactive, ref} from "vue";
import axios, {type AxiosResponse} from "axios";
import {deleteShow, getShows, type Show, showTableHeader} from "@models/show/show.ts";

export function show_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 headers = showTableHeader

    const getItems = async (options) => {
        return getShows(options).then(showList => {
            listData.itemsPerPage = showList.per_page;
            listData.first_page = showList.from;
            listData.last_page = showList.last_page;
            listData.page = showList.current_page;
            listData.total_items = showList.total;

            items.value = showList.data
            loading.value = false;
        }).catch(error => {
            console.log("Error: " + error);
        })
    };

    const editItem = (item) => {
        item['_method'] = 'PUT'

        return axios.post(`show/${item.id}`, item
        ).then((response) => {
            console.log(response)
        })
    }

    const deleteItem = async () => {
        const showIds = selected.value.map(item => item.id)
        await deleteShow(showIds).then(async () => {
            await getItems(listData)
        })
    };

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