describe('keyboard (option)', () => {
  it('should be enabled by default', () => {
    const image = window.createImage();
    const viewer = new Viewer(image);

    expect(viewer.options.keyboard).to.be.true;
  });

  it('should be disabled', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      keyboard: false,

      viewed() {
        expect(viewer.isShown).to.be.true;
        image.dispatchEvent(window.createEvent('keydown', {
          key: 'Escape',
          keyCode: 27,
        }));
        expect(viewer.isShown).to.be.true;
        viewer.hide(true);
        done();
      },
    });

    expect(viewer.options.keyboard).to.be.false;
    viewer.show();
  });

  it('should hide the viewer when press the "Escape" key in modal mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      viewed() {
        image.dispatchEvent(window.createEvent('keydown', {
          key: 'Escape',
          keyCode: 27,
        }));
      },

      hide() {
        done();
      },
    });

    viewer.show();
  });

  it('should exit modal mode when press the "Escape" key in inline mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      inline: true,

      viewed() {
        viewer.full();
        expect(viewer.fulled).to.be.true;
        image.dispatchEvent(window.createEvent('keydown', {
          key: 'Escape',
          keyCode: 27,
        }));
        expect(viewer.fulled).to.be.false;
        done();
      },
    });
  });

  it('should stop playing when press the "Escape" key in modal mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      viewed() {
        viewer.play();
        expect(viewer.played).to.be.true;
        image.dispatchEvent(window.createEvent('keydown', {
          key: 'Escape',
          keyCode: 27,
        }));
        expect(viewer.played).to.be.false;
        viewer.hide(true);
        done();
      },
    });

    viewer.show();
  });

  it('should stop playing when press the "Space bar" key in modal mode', (done) => {
    const imageList = window.createImageList();
    const viewer = new Viewer(imageList, {
      viewed() {
        viewer.play();
        expect(viewer.played).to.be.true;
        imageList.dispatchEvent(window.createEvent('keydown', {
          key: ' ',
          keyCode: 32,
        }));
        expect(viewer.played).to.be.false;
        viewer.hide(true);
        done();
      },
    });

    viewer.show();
  });

  it('should view the previous image when press the "ArrowLeft" key in modal mode', (done) => {
    const imageList = window.createImageList();
    const viewer = new Viewer(imageList, {
      viewed(event) {
        switch (event.detail.index) {
          case 0:
            viewer.hide(true);
            done();
            break;

          case 1: {
            imageList.dispatchEvent(window.createEvent('keydown', {
              key: 'ArrowLeft',
              keyCode: 37,
            }));
            break;
          }

          default:
        }
      },
    });

    viewer.view(1);
  });

  it('should view the next image when press the "ArrowRight" key in modal mode', (done) => {
    const imageList = window.createImageList();
    const viewer = new Viewer(imageList, {
      viewed(event) {
        switch (event.detail.index) {
          case 0: {
            imageList.dispatchEvent(window.createEvent('keydown', {
              key: 'ArrowRight',
              keyCode: 39,
            }));
            break;
          }

          case 1:
            viewer.hide(true);
            done();
            break;

          default:
        }
      },
    });

    viewer.view(0);
  });

  it('should zoom in when press the "ArrowUp" key in modal mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      viewed() {
        const { ratio } = viewer.imageData;

        image.dispatchEvent(window.createEvent('keydown', {
          key: 'ArrowUp',
          keyCode: 38,
        }));
        expect(viewer.imageData.ratio).to.be.above(ratio);
        viewer.hide(true);
        done();
      },
    });

    viewer.show();
  });

  it('should zoom out when press the "ArrowDown" key in modal mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      viewed() {
        const { ratio } = viewer.imageData;

        image.dispatchEvent(window.createEvent('keydown', {
          key: 'ArrowDown',
          keyCode: 40,
        }));
        expect(viewer.imageData.ratio).to.be.below(ratio);
        viewer.hide(true);
        done();
      },
    });

    viewer.show();
  });

  it('should zoom out to initial size when press `Ctrl + 0` in modal mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      viewed() {
        const { imageData } = viewer;
        const { ratio } = imageData;

        viewer.zoomTo(1);
        expect(imageData.ratio).to.not.equal(ratio);
        image.dispatchEvent(window.createEvent('keydown', {
          ctrlKey: true,
          key: '0',
          keyCode: 48,
        }));
        expect(imageData.ratio).to.equal(ratio);
        viewer.hide(true);
        done();
      },
    });

    viewer.show();
  });

  it('should zoom out in to natural size when press `Ctrl + 1` in modal mode', (done) => {
    const image = window.createImage();
    const viewer = new Viewer(image, {
      viewed() {
        const { imageData } = viewer;

        expect(imageData.ratio).to.not.equal(1);
        image.dispatchEvent(window.createEvent('keydown', {
          ctrlKey: true,
          key: '1',
          keyCode: 49,
        }));
        expect(imageData.ratio).to.equal(1);
        viewer.hide(true);
        done();
      },
    });

    viewer.show();
  });
});