import { render } from '@testing-library/react';
import TileSet from './TileSet';

describe('The TiledLayer component ', () => {
  beforeEach(() => {
    globalThis.cacheForTileSet = new Map();
  });

  test('exposes the tiles needed per its viewport', () => {
    const { baseElement } = render(
      <svg>
        <TileSet
          keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
          viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
        />
      </svg>
    );
    //    screen.debug();
    expect(baseElement).toMatchInlineSnapshot(`
<body>
  <div>
    <svg>
      <g
        transform="translate(1, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(2, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/2/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(3, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/3/2.png"
          width="1"
        />
      </g>
    </svg>
  </div>
</body>
`);
  });

  test('adds more tiles when its viewport is updated without removing the previous ones', () => {
    const { baseElement, rerender } = render(
      <svg>
        <TileSet
          keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
          viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
        />
      </svg>
    );
    rerender(
      <svg>
        <TileSet
          keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
          viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
        />
      </svg>
    );
    //    screen.debug();
    expect(baseElement).toMatchInlineSnapshot(`
<body>
  <div>
    <svg>
      <g
        transform="translate(1, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(2, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/2/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(3, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/3/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(5, 0)"
      >
        <image
          height="1"
          href="https://fakeurl/10/5/0.png"
          width="1"
        />
      </g>
      <g
        transform="translate(5, 1)"
      >
        <image
          height="1"
          href="https://fakeurl/10/5/1.png"
          width="1"
        />
      </g>
      <g
        transform="translate(5, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/5/2.png"
          width="1"
        />
      </g>
    </svg>
  </div>
</body>
`);
  });
  test('is not reinitialized if its key isObject updated', () => {
    const { baseElement, rerender } = render(
      <svg>
        <TileSet
          keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
          viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
        />
      </svg>
    );
    rerender(
      <svg>
        <TileSet
          keyObject={{ provider: 'fake', zoomLevel: 10, x: 4, y: 10 }}
          viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
        />
      </svg>
    );
    //    screen.debug();
    expect(baseElement).toMatchInlineSnapshot(`
<body>
  <div>
    <svg>
      <g
        transform="translate(1, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(2, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/2/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(3, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/3/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(5, 0)"
      >
        <image
          height="1"
          href="https://fakeurl/10/5/0.png"
          width="1"
        />
      </g>
      <g
        transform="translate(5, 1)"
      >
        <image
          height="1"
          href="https://fakeurl/10/5/1.png"
          width="1"
        />
      </g>
      <g
        transform="translate(5, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/5/2.png"
          width="1"
        />
      </g>
    </svg>
  </div>
</body>
`);
  });
  test('Also works with negative coordinates', () => {
    const { baseElement } = render(
      <svg>
        <TileSet
          keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
          viewPort={{ topLeft: { x: -3, y: -1 }, bottomRight: { x: -2, y: 2 } }}
        />
      </svg>
    );
    //    screen.debug();
    expect(baseElement).toMatchInlineSnapshot(`
<body>
  <div>
    <svg>
      <g
        transform="translate(-3, -1)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1021/1023.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-2, -1)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1022/1023.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-3, 0)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1021/0.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-2, 0)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1022/0.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-3, 1)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1021/1.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-2, 1)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1022/1.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-3, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1021/2.png"
          width="1"
        />
      </g>
      <g
        transform="translate(-2, 2)"
      >
        <image
          height="1"
          href="https://fakeurl/10/1022/2.png"
          width="1"
        />
      </g>
    </svg>
  </div>
</body>
`);
  });
});
