import { defineStore } from "pinia";
import { useEmployees } from "../employees";
import { useUser } from "../user";
import axios from '@/axios'
import _clone from "lodash/clone";
import _difference from "lodash/difference";
import _pull from "lodash/pull";



export const settingsEmployeesIndex = defineStore({

    id: "settings/employees-index",

    state: () => {
        return {
            columnsSelected: Array<string>(),
            columnsNotSelected: Array<string>()
        }
    },

    actions: {
        async fetchFromApi() {
            const employees = useEmployees()

            if (true){ //check, if api response contains any columns
                this.columnsSelected = ['last_name', 'first_name', 'email', 'phone', 'mobile', 'role']
            }
            else { // if api response does not contain any columns, set default columns
                this.columnsSelected = _clone(employees.columns);
            }
            this.columnsNotSelected = _difference(employees.columns, this.columnsSelected);
        },

        updateColumnsSelected(data : string[]) {
            this.columnsSelected = data;
            this.columnsNotSelected = _difference(this.columnsNotSelected, data);
            this.persist()
        },

        /**
        *   Persist columnsSelected to API
         */
        async persist() {
            const user = useUser()

            const result = await axios.post('settings',
            {
                settings: [
                    {
                        key: "employees-index-columns-selected",
                        value: this.columnsSelected
                    }
                ]
            },
            {
                headers: user.header
            })
            console.log(result)
        }
    }
})