import fetchMock from 'fetch-mock';
import AssetApi from './asset-api';
import pdfImage from '../images/pdf.png';
import { Asset } from '../types/api';
import { afterEach, describe, expect, it } from 'vitest';

describe('Asset API', () => {
  afterEach(() => {
    fetchMock.restore();
  });

  const assetId4: Asset = {
    $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
    alt: null,
    altTranslations: [],
    blobstoreUrl: 'https://nederlandseloterij.blob.core.windows.net/assets/5F37C8B6-6FD0-4919-AD9A-06CA214398F3',
    contentType: 'image/jpeg',
    created: '2019-10-24T13:46:26.421624+02:00',
    createdOn: '2019-10-24T11:46:26.421629+00:00',
    height: 204,
    id: '4',
    imageUrl:
      'http://localhost:35065/assets/146f6931-b2e8-4d2a-9e15-3988e1bdba99?w=200&c=c4a8d16a677479be1adc6b6b9b1b8771ee951a6b048cb5d65b61f5611836cd4d',
    isDeleted: false,
    modified: '2019-10-24T13:46:26.421624+02:00',
    previewData:
      'BCAASACADEkH/2gAMAwEAAhEDEQA/AL+11M7dQcE4yomWUojwScq71tNJLKTxSx27IfPFPcpWOpQgl1quZWl2ijms52n5FOVFjNLOAXH2p5tuTOPhpTFbQSwTBxb9qD5wiLmnV+SrNjtXAdBAA6CEKkuiE3Zrxb0PxZa0Z9BCEIZ+H//Z',
    size: 13739,
    sourceId: '5F37C8B6-6FD0-4919-AD9A-06CA214398F3',
    title: 'hhllo',
    width: 360,
    variants: [],
    tagIds: []
  };

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

  it('should return asset by ID', async () => {
    fetchMock.get(/api\/assets\/4/, {
      status: 200,
      body: assetId4
    });

    fetchMock.get(/api\/assets\/5/, {
      status: 200,
      body: assetId5
    });

    const response = await AssetApi.getAssetById('4');

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

  it('should handle empty guid as ID', async () => {
    fetchMock.get(/api\/assets\/0/, {
      status: 204
    });

    const response = await AssetApi.getAssetById('0');

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

  it('should return correct preview url for an existing image', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      alt: 'cccdddd',
      altTranslations: [],
      blobstoreUrl: 'https://nederlandseloterij.blob.core.windows.net/assets/146F6931-B2E8-4D2A-9E15-3988E1BDBA99',
      contentType: 'image/png',
      created: '2019-10-22T08:18:18.185013+02:00',
      createdOn: '2019-10-22T06:18:18.185019+00:00',
      height: 2100,
      id: '146f6931-b2e8-4d2a-9e15-3988e1bdba99',
      imageUrl:
        'http://localhost:35065/assets/146f6931-b2e8-4d2a-9e15-3988e1bdba99?w=200&c=c4a8d16a677479be1adc6b6b9b1b8771ee951a6b048cb5d65b61f5611836cd4d',
      isDeleted: false,
      modified: '2019-10-22T08:18:18.185013+02:00',
      previewData:
        'BCAAbACADQf/aAAwDAQACEQMRAD8AWrStKKsiFRUYDP1ObLd0lrMCNpx9qC1oTJobQ0Ih6WdowAU4xjTmOpUUmfkazxcb9B0jgxNCVbrtSnp6Y1NNjamuWmn3cFQXBA9lvv3BQMkcSLWlPCxrSQglp3lT6dSCKXBCZPcHTcfBqowSPbw4hb60nefKqs1ShoXf1Xeb80snO0IHc950tdQuhiwBhVZ1pO8+VhkeeXEoA0DiMvcfRK//2Q==',
      size: 3246515,
      sourceId: '146F6931-B2E8-4D2A-9E15-3988E1BDBA99',
      title: 'ddtitelddddffdsdd',
      width: 2500,
      variants: [],
      tagIds: []
    };

    const result = await AssetApi.getPreviewUrlForAsset(asset);
    expect(result).toEqual(asset.imageUrl);
  });

  it('should handle previewurl for an asset which is not an image', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      alt: '',
      altTranslations: [],
      blobstoreUrl: '',
      contentType: 'text/javascript', // wrong contentType
      created: '',
      createdOn: '',
      height: 1,
      id: '',
      imageUrl: '',
      isDeleted: false,
      modified: '',
      previewData: '',
      size: 1,
      sourceId: '',
      title: '',
      width: 1,
      variants: [],
      tagIds: []
    };

    const result = await AssetApi.getPreviewUrlForAsset(asset);
    expect(result).toEqual('');
  });

  it('should handle previewurl for a svg image', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      alt: '',
      altTranslations: [],
      blobstoreUrl: 'https://foo.bar/baz.svg',
      contentType: 'image/svg',
      created: '',
      createdOn: '',
      height: 1,
      id: '',
      imageUrl: '',
      isDeleted: false,
      modified: '',
      previewData: '',
      size: 1,
      sourceId: '',
      title: '',
      width: 1,
      variants: [],
      tagIds: []
    };

    const result = await AssetApi.getPreviewUrlForAsset(asset);
    expect(result).toEqual(asset.blobstoreUrl);
  });

  it('should handle previewurl for a non-image', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      alt: '',
      altTranslations: [],
      blobstoreUrl: 'https://foo.bar/baz.svg',
      contentType: 'application/pdf',
      created: '',
      createdOn: '',
      height: 1,
      id: '',
      imageUrl: '',
      isDeleted: false,
      modified: '',
      previewData: '',
      size: 1,
      sourceId: '',
      title: '',
      width: 1,
      variants: [],
      tagIds: []
    };

    const result = await AssetApi.getPreviewUrlForAsset(asset);
    expect(result).toEqual(pdfImage);
  });

  it('should handle previewurl for no asset', async () => {
    const result = await AssetApi.getPreviewUrlForAsset(null);
    expect(result).toEqual(null);
  });

  it('should handle previewurl for an asset which is not resized yet (case: directly after upload)', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      alt: null,
      altTranslations: [],
      blobstoreUrl: 'https://nederlandseloterij.blob.core.windows.net/assets/5F37C8B6-6FD0-4919-AD9A-06CA214398F3',
      contentType: 'image/jpeg',
      created: '2019-10-24T13:46:26.421624+02:00',
      createdOn: '2019-10-24T11:46:26.421629+00:00',
      height: 204,
      id: '5f37c8b6-6fd0-4919-ad9a-06ca214398f3',
      imageUrl: '/image/5F37C8B6-6FD0-4919-AD9A-06CA214398F3',
      isDeleted: false,
      modified: '2019-10-24T13:46:26.421624+02:00',
      previewData:
        'BCAASACADEkH/2gAMAwEAAhEDEQA/AL+11M7dQcE4yomWUojwScq71tNJLKTxSx27IfPFPcpWOpQgl1quZWl2ijms52n5FOVFjNLOAXH2p5tuTOPhpTFbQSwTBxb9qD5wiLmnV+SrNjtXAdBAA6CEKkuiE3Zrxb0PxZa0Z9BCEIZ+H//Z',
      size: 13739,
      sourceId: '5F37C8B6-6FD0-4919-AD9A-06CA214398F3',
      title: 'hhllo',
      width: 360,
      variants: [],
      tagIds: []
    };

    const result = await AssetApi.getPreviewUrlForAsset(asset);
    expect(result).toEqual(asset.blobstoreUrl);
  });

  it('should handle getting a previewUrl by asset id', async () => {
    fetchMock.get(/api\/assets\/4/, {
      status: 200,
      body: assetId4
    });

    const result = await AssetApi.getPreviewUrlForAssetId('4', '');
    expect(result).toEqual(assetId4.imageUrl);
  });

  it('should get an asset variant', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      title: 'koning-willem-alexander-voor-het-eerst-niet-aanwezig-bij-koningsspelen',
      alt: null,
      altTranslations: [
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'nl',
          alt: null
        },
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'en',
          alt: null
        },
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'de',
          alt: null
        },
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'fr',
          alt: null
        }
      ],
      size: 24421,
      width: 640,
      height: 360,
      contentType: 'image/jpeg',
      sourceId: 'E02E275E-ACC3-4506-A24B-AD333400744C',
      blobstoreUrl: 'https://qcms.blob.core.windows.net/assets/E02E275E-ACC3-4506-A24B-AD333400744C',
      imageUrl:
        'http://localhost:35065/assets/e02e275e-acc3-4506-a24b-ad333400744c?w=600&c=5bc2bc57a468abbd5c676ccda84cce627ead652b8dcbb1780921ee6ce9c45896',
      createdOn: '2020-04-06T05:37:59.871441+00:00',
      isDeleted: false,
      previewData:
        'BCAASACAD/9oADAMBAAIRAxEAPwDl9Gh32h3hbZTropQh8eUhnhJ63CM0OOjPL2yjb8JfRmHbvZs0uYvY6KIidVTT4JMtLYsjTeiNH0v8LOK9wAIkdI5dvbyUbbywAXga6f/Z',
      centerPoint: {
        $type: 'Q.Cms.Core.Domain.CenterPoint, Q.Cms.Core.Domain',
        x: 320,
        y: 180
      },
      variants: [
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '6cbf295f-11dc-4e53-b681-44cd8cf1366b',
          name: 'Header',
          fixedAspectRatio: 1.7777777777777777,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 0,
            y: 0,
            width: 640,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: 'b00d0755-6894-43c4-b3ce-76170dde5ed1',
          name: 'Thumbnail',
          fixedAspectRatio: 1.3333333333333333,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 80,
            y: 0,
            width: 480,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '7fd8c60a-ec37-4026-bf95-699ae52bb307',
          name: 'Instagram',
          fixedAspectRatio: 1.0,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 140,
            y: 0,
            width: 360,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '5c930c4f-f964-4dcb-8a97-89ccb73e957b',
          name: 'Story',
          fixedAspectRatio: 0.5,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 230,
            y: 0,
            width: 180,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '0550f0b4-1f71-4e12-a5de-9eb033442459',
          name: 'Horizontal stroke',
          fixedAspectRatio: 8.0,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 0,
            y: 140,
            width: 640,
            height: 80
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: 'd3a7dd5e-e711-47df-9aab-ecc0381ab0ef',
          name: 'Vertical stroke',
          fixedAspectRatio: 0.125,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 297,
            y: 0,
            width: 45,
            height: 360
          }
        }
      ],
      translationSetId: null,
      language: null,
      id: 'e02e275e-acc3-4506-a24b-ad333400744c',
      created: '2020-04-06T07:37:59.871443+02:00',
      modified: '2020-04-06T07:37:59.871443+02:00',
      hasDynamicValueTags: false,
      tagIds: []
    };

    const selectedVariant = asset.variants[5];

    const url = `/assets/${asset.id}?x=${selectedVariant.crop.x}&y=${selectedVariant.crop.y}&cropWidth=${selectedVariant.crop.width}&cropHeight=${selectedVariant.crop.height}&c=733a230bfe98060ca3bc6ead860ef7fb0b94a3a119164c09c4b533d477e27075`;

    fetchMock.get(/api\/assets\/generate-url/, {
      status: 200,
      body: JSON.stringify(url)
    });

    const result = await AssetApi.getPreviewUrlForAsset(asset, selectedVariant.id);
    expect(result).toEqual(url);
  });

  it('should handle an non-existing variant for an asset', async () => {
    const asset: Asset = {
      $type: 'Q.Cms.Core.Domain.CmsAsset, Q.Cms.Core.Domain',
      title: 'koning-willem-alexander-voor-het-eerst-niet-aanwezig-bij-koningsspelen',
      alt: null,
      altTranslations: [
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'nl',
          alt: null
        },
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'en',
          alt: null
        },
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'de',
          alt: null
        },
        {
          $type: 'Q.Cms.Core.Domain.AltTranslation, Q.Cms.Core.Domain',
          language: 'fr',
          alt: null
        }
      ],
      size: 24421,
      width: 640,
      height: 360,
      contentType: 'image/jpeg',
      sourceId: 'E02E275E-ACC3-4506-A24B-AD333400744C',
      blobstoreUrl: 'https://qcms.blob.core.windows.net/assets/E02E275E-ACC3-4506-A24B-AD333400744C',
      imageUrl:
        'http://localhost:35065/assets/e02e275e-acc3-4506-a24b-ad333400744c?w=600&c=5bc2bc57a468abbd5c676ccda84cce627ead652b8dcbb1780921ee6ce9c45896',
      createdOn: '2020-04-06T05:37:59.871441+00:00',
      isDeleted: false,
      previewData:
        'BCAASACAD/9oADAMBAAIRAxEAPwDl9Gh32h3hbZTropQh8eUhnhJ63CM0OOjPL2yjb8JfRmHbvZs0uYvY6KIidVTT4JMtLYsjTeiNH0v8LOK9wAIkdI5dvbyUbbywAXga6f/Z',
      centerPoint: {
        $type: 'Q.Cms.Core.Domain.CenterPoint, Q.Cms.Core.Domain',
        x: 320,
        y: 180
      },
      variants: [
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '6cbf295f-11dc-4e53-b681-44cd8cf1366b',
          name: 'Header',
          fixedAspectRatio: 1.7777777777777777,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 0,
            y: 0,
            width: 640,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: 'b00d0755-6894-43c4-b3ce-76170dde5ed1',
          name: 'Thumbnail',
          fixedAspectRatio: 1.3333333333333333,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 80,
            y: 0,
            width: 480,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '7fd8c60a-ec37-4026-bf95-699ae52bb307',
          name: 'Instagram',
          fixedAspectRatio: 1.0,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 140,
            y: 0,
            width: 360,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '5c930c4f-f964-4dcb-8a97-89ccb73e957b',
          name: 'Story',
          fixedAspectRatio: 0.5,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 230,
            y: 0,
            width: 180,
            height: 360
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: '0550f0b4-1f71-4e12-a5de-9eb033442459',
          name: 'Horizontal stroke',
          fixedAspectRatio: 8.0,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 0,
            y: 140,
            width: 640,
            height: 80
          }
        },
        {
          $type: 'Q.Cms.Core.Domain.AssetVariant, Q.Cms.Core.Domain',
          id: 'd3a7dd5e-e711-47df-9aab-ecc0381ab0ef',
          name: 'Vertical stroke',
          fixedAspectRatio: 0.125,
          isUnTouched: true,
          isDefaultVariant: true,
          crop: {
            $type: 'Q.Cms.Core.Domain.AssetVariantCrop, Q.Cms.Core.Domain',
            x: 297,
            y: 0,
            width: 45,
            height: 360
          }
        }
      ],
      translationSetId: null,
      language: null,
      id: 'e02e275e-acc3-4506-a24b-ad333400744c',
      created: '2020-04-06T07:37:59.871443+02:00',
      modified: '2020-04-06T07:37:59.871443+02:00',
      hasDynamicValueTags: false,
      tagIds: []
    };

    const selectedVariant = asset.variants[5];

    const url = `/assets/${asset.id}?x=${selectedVariant.crop.x}&y=${selectedVariant.crop.y}&cropWidth=${selectedVariant.crop.width}&cropHeight=${selectedVariant.crop.height}&c=733a230bfe98060ca3bc6ead860ef7fb0b94a3a119164c09c4b533d477e27075`;

    fetchMock.get(/api\/assets\/generate-url/, {
      status: 200,
      body: JSON.stringify(url)
    });

    const result = await AssetApi.getPreviewUrlForAsset(asset, '1234');
    expect(result).toEqual(asset.imageUrl);
  });
});