import axios from "axios";
import {ref, reactive, computed} from "vue";

export function archive_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 = [
        // {title: '', key: 'artwork'},
        {title: 'Titolo', value: 'track_title'},
        {title: 'Artista', value: 'artist_name'},
        {title: 'Genere', value: 'genre'},
        {title: 'Tipologia', value: 'track_type.type_name'},
        {title: 'Durata', value: 'length'},
        {title: 'Caricato il', value: 'mtime'},
        {title: 'Azioni', value: 'actions'}
    ];

    /**
     * @param page_info created by v-data-table-server on update
     */
    const getItems = async (page_info) => {
        loading.value = true;
        return await axios.get(`/file`, {
            params: {
                page: page_info.page,
                per_page: page_info.itemsPerPage,
                all: search.value
            }
        }).then((response) => {
            //console.log(response)
            listData.itemsPerPage = response.data.per_page;
            listData.first_page   = response.data.from;
            listData.last_page    = response.data.last_page;
            listData.page         = response.data.current_page;
            listData.total_items  = response.data.total;

            items.value = response.data.data.filter(el => el.import_status === 0)
            loading.value = false;

        }).catch((error) => {
            console.log("Error: "+error);
        })
    }
    const editItem = (item) => {
        item['_method'] = 'PUT'

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

    const deleteItem = (id) => {

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

    const uploadItem = async (item): Promise<object> => {
        return await axios.post('/file', item
        ).then(response => {
            console.log(response)
            if (response.status === 200) {
                return response.data
            }
            return response.data
        })
        .catch((error) => {
            console.log(error)
            return {error: error}
        })
    }


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