import { ActionTree, GetterTree, MutationTree } from 'vuex';

import { handleDelete, handleFetch } from '../../api/helpers';
import RootState from '../types/RootStateModel';
import CrudApi from '../../api/crud-api';

import CrudStoreModel, { CrudStoreItemsModel } from "../types/CrudStoreModel";
import { CreateCrudItemPayload, DeleteCrudItemPayload, SaveCrudItemPayload, UpdateCrudItemPayload } from "../../types/api";

export const state: CrudStoreModel = {
  initialized: false,
  language: '',
  path: '',
  loading: false,
  hasItemsError: false,
  schema: undefined,
  items: [],
  overview: {
    fields: [],
  },
};

export const getters: GetterTree<CrudStoreModel, RootState> = {
  getItemByGuid: (state) => (guid: string) => {
    return state.items.find(item => item.id === guid);
  },
  getItemsByGuids: (state) => (guids: string[]) => {
    return guids.map(guid => state.items.find(item => item.id === guid)).filter(item => item);
  },
  hasData(state) {
    return state.initialized && !state.loading;
  }
};

export const actions: ActionTree<CrudStoreModel, RootState> = {
  async fetchCrudData({ commit, dispatch, rootState }, onlyItems = false) {
    commit('isLoading', true);
    await dispatch('fetchCrudItems');

    if (!onlyItems) {
      await dispatch('fetchCrudSchema');
    }

    commit('initialized', true);

    if (rootState.languages.useMultiLanguage) {
      commit('language', rootState.languages.selected?.key || '');
    }

    commit('isLoading', false);
  },
  async fetchCrudItems({ commit, state }) {
    try {
      if (!state.loading) {
        commit('isLoading', true);
      }

      const items = await CrudApi.getItems(state.path);

      commit('crudItems', items);
      commit('hasItemsError', false);
      commit('isLoading', false);
    } catch (error) {
      commit('hasItemsError', true);
    }
  },
  async fetchCrudSchema({ commit, state }) {
    const response = await handleFetch(`/items/${state.path}/schema`);

    commit('crudSchema', await response.json());
  },
  async getItemById({ state }, id: string): Promise<CrudStoreItemsModel> {
    const response = await handleFetch(`/items/${state.path}/${id}`);

    return await response.json();
  },
  async saveItem({ dispatch }, payload: SaveCrudItemPayload): Promise<CrudStoreItemsModel> {
    if (!payload.id) {
      return await dispatch('createItem', payload);
    }

    return await dispatch('updateItem', payload);
  },
  async createItem({ state, dispatch, rootState }, payload: CreateCrudItemPayload): Promise<CrudStoreItemsModel> {
    const { useMultiLanguage, selected } = rootState.languages;
    const path = `/items/${state.path}`;
    const response = await handleFetch(useMultiLanguage && selected ? `${path}?language=${selected.key}` : path, {
      method: 'POST',
      body: JSON.stringify(payload.item)
    });

    dispatch('fetchCrudData', true);

    return await response.json();
  },
  async updateItem({ state, dispatch }, payload: UpdateCrudItemPayload): Promise<CrudStoreItemsModel> {
    const response = await handleFetch(`/items/${state.path}/${payload.id}`, {
      method: 'PUT',
      body: JSON.stringify(payload.item)
    });

    dispatch('fetchCrudData', true);

    return await response.json();
  },
  async deleteItem({ state, dispatch }, payload: DeleteCrudItemPayload): Promise<void> {
    await handleDelete(`/items/${state.path}/${payload.id}`);

    dispatch('fetchCrudData', true);
  }
};

export const mutations: MutationTree<CrudStoreModel> = {
  initialized(state, initialized: boolean) {
    state.initialized = initialized;
  },
  language(state, language: string) {
    state.language = language;
  },
  crudItems(state, items: any[]) {
    state.items = items;
  },
  crudSchema(state, schema: any) {
    state.schema = schema;
  },
  isLoading(state, loading: boolean) {
    state.loading = loading;
  },
  hasItemsError(state, hasItemsError: boolean) {
    state.hasItemsError = hasItemsError;
  }
};