import { ActionTree, Module, MutationTree } from 'vuex';
import { VueRouter } from 'vue-router/types/router';
import _cloneDeep from 'lodash/cloneDeep';

import RootState from '../types/RootStateModel';
import AssetStoreModel, { AssetSearchState } from '../types/AssetStoreModel';
import {
  AddAssetTagsRequest,
  Asset,
  AssetPagination,
  AssetSortField, AssetSortOrder, AssetTypeFilter,
  Schema
} from '../../types/api';
import AssetApi from '../../api/asset-api';

const namespaced = true;

export const INITIAL_SEARCH_STATE: AssetSearchState = {
  selectedTags: [],
  searchQuery: '',
  assetSortField: AssetSortField.DateModified,
  assetSortOrder: AssetSortOrder.Descending,
  assetTypeFilter: AssetTypeFilter.All
};

const state: AssetStoreModel = {
  initialized: false,
  allAssets: [],
  isLoadingAssets: true,
  pagination: {
    totalResults: 0,
    currentPage: 1,
    totalPages: 0,
    pageSize: 20
  },
  schema: undefined,
  searchState: _cloneDeep(INITIAL_SEARCH_STATE)
};

const actions: ActionTree<AssetStoreModel, RootState> = {
  async $init({ commit, dispatch }, router: VueRouter) {
    const { page } = router.currentRoute.query;
    const initPage = page ? parseInt(page as string) : undefined;

    if (initPage) {
      commit('setCurrentPage', initPage);
    }

    await dispatch('fetchSchema');
    await dispatch('searchAssets');

    commit('setInitialized', true);
  },

  async fetchSchema({ commit }) {
    commit('setLoading', true);

    const schema = await AssetApi.getSchema();

    commit('setSchema', schema);
    commit('setLoading', false);
  },

  async searchAssets({ state, commit }) {
    const { searchQuery, selectedTags, assetTypeFilter, assetSortField, assetSortOrder } = state.searchState;
    const { results, currentPage, totalPages, totalResults } = await AssetApi.searchAssets({
      search: searchQuery,
      tagFilter: selectedTags.map(tag => tag.id),
      assetTypeFilter,
      assetSortField,
      assetSortOrder,
      currentPage: state.pagination.currentPage,
      pageSize: state.pagination.pageSize
    });

    commit('setAssets', results);
    commit('setPagination', {
      currentPage,
      totalPages,
      totalResults
    })
  },

  async addTags({ dispatch }, request: AddAssetTagsRequest) {
    const response = await AssetApi.addTags(request);

    dispatch('searchAssets');

    return response;
  },

  async updateAsset({ dispatch }, asset: Asset) {
    const updatedAsset = await AssetApi.updateAsset(asset);

    dispatch('searchAssets');

    return updatedAsset;
  },

  async createAsset({ dispatch }, data: FormData) {
    const createdAsset = await AssetApi.createAsset(data);

    dispatch('searchAssets');

    return createdAsset;
  },

  async deleteAsset({ dispatch }, id: string) {
    const response = await AssetApi.deleteAsset(id);

    dispatch('searchAssets');

    return response;
  },

  async deleteAssets({ dispatch }, ids: string[]) {
    const response = await AssetApi.deleteAssets(ids);

    dispatch('searchAssets');

    return response;
  },
};

const mutations: MutationTree<AssetStoreModel> = {
  setInitialized(assetsState, initialized: boolean) {
    assetsState.initialized = initialized;
  },

  setAssets(assetsState, assets: Asset[]) {
    assetsState.allAssets = assets;
  },

  setSearchState(assetsState, searchState: AssetSearchState) {
    assetsState.searchState = searchState;
  },

  setCurrentPage(assetsState, currentPage: number) {
    assetsState.pagination = { ...assetsState.pagination, currentPage };
  },

  setPagination(assetsState, pagination: Partial<AssetPagination>) {
    assetsState.pagination = { ...assetsState.pagination, ...pagination };
  },

  setLoading(assetsState, isLoading: boolean) {
    assetsState.isLoadingAssets = isLoading;
  },

  setSchema(state, schema: Schema) {
    state.schema = schema;
  },
};

export const assetStore: Module<AssetStoreModel, RootState> = {
  namespaced,
  state,
  actions,
  mutations,
};