import { defineStore } from 'pinia'
import { useUser } from '@/stores/user'
import axios from '@/axios'
import _cloneDeep from 'lodash/cloneDeep'
import _assign from 'lodash/assign'
import _debounce from 'lodash/debounce'
import { reactive, watch, onMounted } from 'vue'

export default defineStore('employees', () => {
    const user = useUser()

    const state = reactive({
        rows: Array<Employee>(),
        columns: Array<string>(),

        meta : {
            current_page: NaN,
            first_page: NaN,
            last_page: NaN,
            per_page: NaN,
            total: NaN
        },

        limit: 10,
        page: 1,
        sort_by: '',
        simple_search: ''
    })

    async function fetchFromApi() {
        try { 
            const data : any = (await axios.get(
                '/employees',
                {
                    params: {
                        limit: state.limit,
                        page: state.page,
                        sort_by: state.sort_by,
                        simple_search: state.simple_search
                    },
                    headers: user.header
                }
            )).data

            _assign(state.meta, data.meta)
            state.rows = _cloneDeep(data.data)
            
            _assign(state.columns, fetchColumns())
        }
        catch(err) {
            console.log(err)
        }
    }

    function fetchColumns() : string[] {
        if(state.rows[0]){
            return Object.keys(state.rows[0])
        }
        return []
    }

    function setLimit(pLimit : number) {
        state.limit = pLimit
    }

    function setSortBy(pSortBy : string) {
        state.sort_by = pSortBy
    }

    function setSimpleSearch(pSimpleSearch : string) {
        state.simple_search = pSimpleSearch
    }

    function setPage(pPage : number) {
        state.page = pPage
    }

    watch(() => [state.limit, state.sort_by, state.simple_search, state.page], _debounce(() => {
        fetchFromApi()
    }, 300))

    onMounted(() => {
        fetchFromApi()
    })

    return {
        state,
        fetchFromApi,
        setLimit,
        setSortBy,
        setSimpleSearch,
        setPage
    }

})