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

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

    const rows = reactive(Array<any>())
    const columns = reactive(Array<string>())

    const meta = reactive({
        current_page: NaN,
        first_page: NaN,
        last_page: NaN,
        per_page: NaN,
        total: NaN
    })

    const limit = ref(10)
    const page = ref(1)
    const sort_by = ref('')
    const simple_search = ref('')

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

            _assign(meta, data.meta)
            _assign(rows, data.data)
            _assign(columns, fetchColumns())
            console.log("Employees: Fetched from api")
        }
        catch(err) {
            console.log(err)
        }
    }

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

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

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

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

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

    watch([limit, sort_by, simple_search, page], () => {
        fetchFromApi()
    })

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

    return {
        rows, columns, meta,
        limit, page, sort_by, simple_search,
        fetchFromApi,
        setLimit,
        setSortBy,
        setSimpleSearch,
        setPage
    }

})

/* 
export const useEmployees = defineStore('employees', {
    state: () => {
        return { 
            /**
            *   @type any[]
             
            rows: Array<any>(),

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

            columns: Array<string>(),

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

    actions: {
        /**
        *   @param: {number} limit          - QueryString: limit=20 etc.
        *   @param: {number} page           - QueryString: page=1 etc.
        *   @param: {string} sortBy         - QueryString: sort_by=asc(col1),desc(col2),...
        *   @param: {string} simpleSearch   - QueryString: simple_search=query(col1,col2,...)
        **
        async fetchFromApi() {
            try {
                
                const data : any = (await axios.get(
                    '/employees',
                    {
                        params: {
                            limit: this.limit,
                            page: this.page,
                            sort_by: this.sort_by,
                            simple_search: this.simple_search
                        },
                        headers: user.header
                    }
                )).data

                Object.assign(this.meta, data.meta)
                this.rows = _cloneDeep(data.data)

                this.columns = this.fetchColumns()
            }
            catch(err) {
                console.log(err)
            }
        },

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

        setLimit(limit : number) {
            this.limit = limit
            this.fetchFromApi()
        },
        setSortBy(sortBy : string) {
            this.sort_by = sortBy
            this.fetchFromApi()
        },
        setSimpleSearch(simpleSearch : string) {
            this.simple_search = simpleSearch
            this.fetchFromApi()
        },
        setPage(page : number) {
            this.page = page
            this.fetchFromApi()
        }
    }
}) */