// @ts-ignore
import { fetchMock } from 'fetch-mock';
import { cloneDeep } from 'lodash';

import RootState from '../types/RootStateModel';
import { CmsStore, storeConfig } from '../index';
import { Asset, AssetSearchResponse } from '../../types/api';
import { TypedVueRouter as VueRouter } from '../../tools/vue-router'

const router = new VueRouter();

const sampleAssets: Asset[] = [
  {
    '$type': 'Q42.Cms.Core.Domain.CmsAsset, Q42.Cms.Core.Domain',
    'title': '100 deel',
    'alt': null,
    'alts': {},
    'size': 3245146,
    'width': 2500,
    'height': 2100,
    'contentType': 'image/png',
    'sourceId': '6677CA7C-8F5E-4E9B-BFCB-1A7DF7E654F0',
    'blobstoreUrl': 'https://nederlandseloterij.blob.core.windows.net/assets/6677CA7C-8F5E-4E9B-BFCB-1A7DF7E654F0',
    'imageUrl': 'https://localhost:44342/assets/6677ca7c-8f5e-4e9b-bfcb-1a7df7e654f0?w=200&c=a2ead8d12bfcb262bedacb8e9ff5eeb5a4dd24269ef369f472dd4ec909ddcc5b',
    'createdOn': '2019-10-22T09:37:09.755957+00:00',
    'createdBy': null,
    'isDeleted': false,
    'previewData': 'BCAAbACADQf/aAAwDAQACEQMRAD8Am8UxCOshE8+gYq1uJW7bwxvCMYhdJZGBn8TD09Q0cAqzowIdx1Rhk3yPM8Sp2MW8HQxtU3lWJQ01MaiADaq6aKcO6K5L814sku8cafaJiyXOk1ITeThsji3aUoxXMqe30Qil0IATqTxFofjsbosVEjx04hHmPP6KRs1SJoA39W1Mzy2yn3MASTKcvpayiMMGgBWYCV46eUOke7txKwGNBsBUL3EUSv/Z',
    'centerPoint': { '$type': 'Q42.Cms.Core.Domain.CenterPoint, Q42.Cms.Core.Domain', 'x': 318, 'y': 428 },
    'variants': [{ '$type': 'Q42.Cms.Core.Domain.AssetVariant, Q42.Cms.Core.Domain', 'id': '56de568d-4ce3-46d6-a22b-c71c315ab25f', 'name': 'Responsive desktop', 'fixedAspectRatio': 1.7777777777777777, 'isUntouched': true, 'isDefaultVariant': true, 'crop': { '$type': 'Q42.Cms.Core.Domain.AssetVariantCrop, Q42.Cms.Core.Domain', 'centerPoint': { '$type': 'Q42.Cms.Core.Domain.CenterPoint, Q42.Cms.Core.Domain', 'x': 318, 'y': 428 }, 'width': 626, 'height': 352 } }],
    'id': '6677ca7c-8f5e-4e9b-bfcb-1a7df7e654f0',
    'created': '2019-10-22T11:37:09.755953+02:00',
    'modified': '2019-10-22T11:37:09.755953+02:00',
    'modifiedBy': null,
    'tagIds': []
  },
  {
    '$type': 'Q42.Cms.Core.Domain.CmsAsset, Q42.Cms.Core.Domain',
    'title': '100 heel',
    'alt': null,
    'alts': {},
    'size': 3246515,
    'width': 2500,
    'height': 2100,
    'contentType': 'image/png',
    'sourceId': 'E2B0070E-EA35-4D59-9833-34A6702779A1',
    'blobstoreUrl': 'https://nederlandseloterij.blob.core.windows.net/assets/E2B0070E-EA35-4D59-9833-34A6702779A1',
    'imageUrl': 'https://localhost:44342/assets/e2b0070e-ea35-4d59-9833-34a6702779a1?w=200&c=19ff9f05fe8f0b38d01fa92c3db455e5989a26396d4984cb034a72011483f6e6',
    'createdOn': '2019-10-22T09:35:34.025747+00:00',
    'createdBy': null,
    'isDeleted': false,
    'previewData': 'BCAAbACADBP/aAAwDAQACEQMRAD8Am8UxCO5CJ59gxVrcS07p8Mb4RjELpNEYGfxMDXsNHgFOdZ08z7E6tnP9HW/IqdjGnA7FjVN5ViMNWsbEAHSq2aKwHcFc2vNeNCl7g+lBhtVL9mnu0Y44qeRPiuZV9PpCKXYgBOpPUWj8ehuyxUSPHDiEdx5/RVVtVIaBv2bUzPdNkPuYAkuU5fVuUjDBsAVl4leOHlDpHu5cSgMQbCG55JSz/9k=',
    'centerPoint': { '$type': 'Q42.Cms.Core.Domain.CenterPoint, Q42.Cms.Core.Domain', 'x': 318, 'y': 428 },
    'variants': [{ '$type': 'Q42.Cms.Core.Domain.AssetVariant, Q42.Cms.Core.Domain', 'id': '56de568d-4ce3-46d6-a22b-c71c315ab25f', 'name': 'Responsive desktop', 'fixedAspectRatio': 1.7777777777777777, 'isUntouched': true, 'isDefaultVariant': true, 'crop': { '$type': 'Q42.Cms.Core.Domain.AssetVariantCrop, Q42.Cms.Core.Domain', 'centerPoint': { '$type': 'Q42.Cms.Core.Domain.CenterPoint, Q42.Cms.Core.Domain', 'x': 318, 'y': 428 }, 'width': 626, 'height': 352 } }],
    'id': 'e2b0070e-ea35-4d59-9833-34a6702779a1',
    'created': '2019-10-22T11:35:34.025742+02:00',
    'modified': '2019-10-22T11:35:34.025742+02:00',
    'modifiedBy': null,
    'tagIds': []
  }
];

const sampleAsset: Asset = {
  $type: '',
  alt: 'new',
  alts: {},
  blobstoreUrl: '',
  contentType: '',
  created: '',
  createdOn: '',
  createdBy: '',
  height: 4,
  id: '1234',
  imageUrl: '',
  isDeleted: false,
  modified: '',
  modifiedBy: '',
  previewData: '',
  size: 10,
  sourceId: '',
  title: '',
  variants: [],
  tagIds: [],
  width: 2,
};

const searchResponse: AssetSearchResponse = {
  currentPage: 1,
  totalPages: 1,
  totalResults: 2,
  results: sampleAssets
}

describe('Asset store', () => {

  afterEach(() => {
    fetchMock.restore();
  });

  function createLocalStore(): CmsStore<RootState> {
    return new CmsStore(cloneDeep(storeConfig));
  }

  it('should initialize properly', async () => {
    const store = createLocalStore();
    const dispatchSpy = jest.spyOn(store, 'dispatch').mockImplementation(jest.fn());

    expect(dispatchSpy).not.toHaveBeenCalled();

    await store.initialize(router);

    expect(dispatchSpy).toHaveBeenCalledWith('assets/fetchSchema', undefined);
    expect(dispatchSpy).toHaveBeenCalledWith('assets/searchAssets', undefined);
  });

  it('should search assets and put them in a store', async () => {
    fetchMock.post(/api\/assets\/search/, {
      status: 200,
      body: searchResponse,
    });

    const store = createLocalStore();
    const commitSpy = jest.spyOn(store, 'commit').mockImplementation(jest.fn());

    expect(commitSpy).not.toHaveBeenCalled();

    await store.dispatch('assets/searchAssets', {});

    expect(commitSpy).toHaveBeenNthCalledWith(1, 'assets/setAssets', searchResponse.results, undefined);
    expect(commitSpy).toHaveBeenNthCalledWith(2, 'assets/setPagination', {
      currentPage: searchResponse.currentPage,
      totalPages: searchResponse.totalPages,
      totalResults: searchResponse.totalResults
    }, undefined);
  });

  it('should update the state of assets', async () => {
    const store = createLocalStore();
    store.commit('assets/setAssets', sampleAssets);

    expect(store.state.assets.allAssets).toEqual(sampleAssets);
  });

  it('should update an existing asset', async () => {
    const resp = { foo: 'bar' };

    fetchMock.put(/api\/assets\/1234\/update/, {
      status: 200,
      body: resp,
    });

    fetchMock.post(/api\/assets\/search/, {
      status: 200,
      body: searchResponse,
    });

    const store = createLocalStore();

    const response = await store.dispatch('assets/updateAsset', sampleAsset);

    expect(response).toEqual(resp);
  });

  it('should create a new asset', async () => {
    const resp = { foo: 'bar' };

    fetchMock.post(/api\/assets\/create/, {
      status: 200,
      body: resp,
    });

    fetchMock.post(/api\/assets\/search/, {
      status: 200,
      body: searchResponse,
    });

    const store = createLocalStore();
    const formData = new FormData();

    const response = await store.dispatch('assets/createAsset', formData);

    expect(response).toEqual(resp);
  });

  it('should delete an asset', async () => {
    fetchMock.delete(/api\/assets\/1234\/delete/, {
      status: 200,
      body: sampleAsset,
    });

    fetchMock.post(/api\/assets\/search/, {
      status: 200,
      body: searchResponse,
    });

    const store = createLocalStore();
    const response = await store.dispatch('assets/deleteAsset', 1234);

    expect(await response.json()).toEqual(sampleAsset);
  });
});