module('Integration | Component | search/search-facet', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function(assert) {
    await createTest(this);
    assert.equal(getTextNoSpaces(this), 'Facet1Value11Value210');
  });

  test('it renders with clear', async function(assert) {
    await createTest(this, { value1: true });
    assert.equal(getTextNoSpaces(this), 'Facet1clearValue11Value210');
  });

  test('clear action', async function(assert) {
    const { wasClearCalled } = await createTest(this, { value1: true });
    assert.equal(getTextNoSpaces(this), 'Facet1clearValue11Value210');
    await click(CLEAR_BTN_SELECTOR);
    assert.ok(wasClearCalled(), 'Clear was called');
  });

  test('facet changed action', async function(assert) {
    const { wasChangedCalled } = await createTest(this, { value1: true });
    assert.equal(getTextNoSpaces(this), 'Facet1clearValue11Value210');
    await click(FACET_OPTION_SELECTOR);
    assert.ok(wasChangedCalled(), 'Clear was called');
  });
});

module('Integration | Component | datasets/dataset-fabric-switcher', function(hooks) {
  setupRenderingTest(hooks);

  const contentSelector = '.dataset-fabric-switcher__fabrics';
  const triggerSelector = '.dataset-fabric-switcher__fabric';

  test('component rendering', async function(assert) {
    assert.expect(1);

    await render(hbs`
      {{datasets/dataset-fabric-switcher}}
    `);

    assert.ok(this.element.querySelector('.dataset-fabric-switcher'), 'expected component class exists in DOM');
  });

  test('toggle action shows and hides dropdown', async function(assert) {
    assert.expect(3);

    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{datasets/dataset-fabric-switcher urn=urn}}
    `);

    assert.notOk(find(contentSelector), 'expected dropdown content class is hidden');

    await triggerEvent(triggerSelector, 'mouseenter');

    assert.ok(find(contentSelector), 'expected dropdown content class is shown');

    await triggerEvent(triggerSelector, 'mouseleave');

    assert.notOk(find(contentSelector), 'expected dropdown content class is hidden');
  });

  test('rendering of fabrics', async function(assert) {
    assert.expect(1);

    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{datasets/dataset-fabric-switcher urn=urn}}
    `);

    await triggerEvent(triggerSelector, 'mouseenter');

    assert.equal(
      findAll(`${contentSelector} li`).length,
      fabrics.length,
      'expected fabrics shown to equal default list of fabrics'
    );
  });
});

module('Integration | Component | datasets/dataset-relationships', function(hooks) {
  setupRenderingTest(hooks);

  test('component rendering', async function(assert) {
    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{#datasets/dataset-relationships urn=urn}}
      {{/datasets/dataset-relationships}}
    `);

    assert.ok(this.element, 'renders component into DOM');
  });
});

module('Integration | Component | datasets/containers/dataset-lineage-upstreams', function(hooks) {
  setupRenderingTest(hooks);

  test('component rendering', async function(assert) {
    assert.expect(2);

    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{#datasets/containers/dataset-lineage-upstreams urn=urn}}
        nested container content
      {{/datasets/containers/dataset-lineage-upstreams}}
    `);

    assert.ok(this.element, 'expect component to be rendered in DOM');
    assert.equal(
      this.element.textContent!.trim(),
      'nested container content',
      'expect container to render nested content'
    );
  });

  test('component yielding with a urn', async function(assert) {
    assert.expect(1);

    const { server }: any = this;
    const upstreamCount = 3;

    server.createList('datasetView', upstreamCount);

    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{#datasets/containers/dataset-lineage-upstreams urn=urn as |container|}}
        <ul class="container-list">
          {{#each container.upstreams}}
            <li></li>
          {{/each}}
        </ul>
      {{/datasets/containers/dataset-lineage-upstreams}}
    `);

    assert.equal(
      findAll('.container-list li')!.length,
      upstreamCount,
      'expect component to yield each upstream dataset'
    );
  });
});

module('Integration | Component | last-saved-by', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function(assert) {
    await render(hbs`{{last-saved-by}}`);

    assert.ok(
      this.element.textContent!.includes('Never'),
      'it shows a modification time of never when no attributes are passed'
    );
    assert.ok(
      this.element.textContent!.includes('Last Saved:'),
      'it shows a default title when no title attribute is passed'
    );
  });

  test('property rendering', async function(assert) {
    const time = new Date().getTime();
    const actor = 'John Appleseed';
    const title = 'Last Modified';

    this.set('time', time);
    this.set('actor', actor);
    this.set('title', title);

    await render(hbs`{{last-saved-by time=time actor=actor}}`);

    assert.ok(this.element.textContent!.includes(moment(time).fromNow()), 'it shows the last saved time from now');
    assert.ok(this.element.textContent!.includes(actor), 'it shows the actor attribute');

    await render(hbs`{{last-saved-by time=time title=title}}`);

    assert.ok(this.element.textContent!.includes('Last Modified'), 'it shows the passed in title');
    assert.ok(!this.element.textContent!.includes('Last Saved:'), 'it does not show the default title');

    await render(hbs`
      {{#last-saved-by time=time title=title actor=actor as |ls|}}
        <div class="yielded-title">{{ls.title}}</div>
        <div class="yielded-actor">{{ls.actor}}</div>
      {{/last-saved-by}}
    `);

    assert.equal(find('.yielded-title')!.textContent!.trim(), title, 'block usage yields the title');
    assert.equal(find('.yielded-actor')!.textContent!.trim(), actor, 'block usage yields the actor');
  });
});

module('Integration | Component | search/containers/search-box', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function(assert) {
    await render(hbs`
      {{#search/containers/search-box  as |keyword placeholder onTypeahead onSearch|}}
        template block text
      {{/search/containers/search-box}}
    `);

    assert.equal(getText(this).trim(), 'template block text');
  });

  test('onTypeahead', async function(this: ITestWithMirageContext, assert) {
    const apiHandler = getMirageHandle(this, '/api/v1/autocomplete/datasets', 'get');
    assert.expect(6);

    containerComponentTest(this, async (component: IContainerStub) => {
      // dont return anything with less than 3
      const results1 = await component.onTypeahead('h');
      assert.equal(results1.length, 0);

      // return list
      const results2 = await component.onTypeahead('hol');
      assert.ok(results2.length > 0);

      // cache return
      const results3 = await component.onTypeahead('hol');
      assert.ok(results3.length > 0);
      assert.equal(apiHandler.numberOfCalls, 1, 'cached return');

      // debounce
      component.onTypeahead('hola');
      component.onTypeahead('hola ');
      const results4 = await component.onTypeahead('hola nacho');
      assert.ok(results4.length > 0);
      assert.equal(apiHandler.numberOfCalls, 2, 'App debounces calls');
    });

    await render(hbs`
      {{#search/containers/search-box  as |keyword placeholder onTypeahead onSearch|}}
        {{container-stub onTypeahead=(action onTypeahead)}}
      {{/search/containers/search-box}}
    `);
  });
});

module('Integration | Component | datasets/containers/data-systems-count', function(hooks) {
  setupRenderingTest(hooks);

  test('component rendering', async function(assert) {
    assert.expect(2);

    await render(hbs`
      {{#datasets/containers/data-systems-count}}
        nested container content
      {{/datasets/containers/data-systems-count}}
    `);

    assert.ok(this.element, 'expect component to be rendered in DOM');
    assert.equal(
      this.element.textContent!.trim(),
      'nested container content',
      'expect container to render nested content'
    );
  });

  test('component rendering with a urn', async function(assert) {
    assert.expect(2);

    const { server }: any = this;
    server.create('datasetsCount');

    this.set('urn', nonHdfsUrn);

    await render(hbs`
      {{#datasets/containers/data-systems-count urn=urn as |container|}}
        {{container.count}}
      {{/datasets/containers/data-systems-count}}
    `);

    assert.ok(this.element, 'expect component to be rendered in DOM');

    const yieldedCount = parseInt(this.element.textContent!);
    assert.ok(yieldedCount >= 0, 'expect yielded value to be a number greater or equal to 0');
  });
});

module('Integration | Component | metadata-preview', function(hooks) {
  setupRenderingTest(hooks);

  module('image / thumbnail preview', function() {
    module('there is no image in the og data', function(hooks) {
      hooks.beforeEach(async function(this: TestContext) {
        this.set('data', {});
        await render(hbs`{{chat-history/message/embedded-resource/metadata-preview}}`);
      });

      test('no image is shown', function(assert) {
        const img = find('img');

        assert.notOk(img);
      });
    });

    module('there is an image in the og data', function(hooks) {
      hooks.beforeEach(async function(this: TestContext) {
        this.set('data', {
          image: 'https://something',
        });

        await render(hbs`
                     {{chat-history/message/embedded-resource/metadata-preview
                      ogData=data
                     }}
                     `);
      });

      test('an image tag is present', function(assert) {
        const img = find('img');

        assert.ok(img, 'the html tag is present');
        assert.equal(img!.getAttribute('alt'), 'Thumbnail', 'has alt text');
      });
    });
  });
});

module('Integration | Component | get-yield', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders and displays correct value', async function(assert) {
    const myObject = {
      hello: 'world'
    };

    this.setProperties({
      object: myObject,
      property: 'hello'
    });

    await render(hbs`
      {{#get-yield object=object property=property as |text|}}
        {{text}}
      {{/get-yield}}
    `);

    assert.equal(getText(this), 'world');
  });

  test('it renders and displays default value', async function(assert) {
    const myObject = {};

    this.setProperties({
      object: myObject,
      property: 'hello'
    });

    await render(hbs`
      {{#get-yield object=object property=property default='world' as |text|}}
        {{text}}
      {{/get-yield}}
    `);

    assert.equal(getText(this), 'world');
  });
});

module('Integration | Component | embedded-resource', function(hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function() {
    stubService('chat-scroller', {});
  });

  module('shouldRender', function() {
    module('there is nothing to display', function(hooks) {
      disableOpenGraphFetching(hooks, 'hi');

      hooks.beforeEach(async function() {
        await render(hbs`
                     {{chat-history/message/embedded-resource}}
                     `);
      });

      test('nothing is rendered', async function(assert) {
        const text = (this.element as HTMLElement).innerText.trim();

        assert.equal(text, '');
      });
    });

    module('the url is embeddable', function(hooks) {
      disableOpenGraphFetching(hooks);

      hooks.beforeEach(async function(this: TestContext) {
        this.set('someUrl', 'https://i.imgur.com/gCyUdeb.gifv');

        await render(hbs`
                     {{chat-history/message/embedded-resource
                      url=someUrl}}
                     `);
      });

      // TODO: for some reason I can't stub this component's services
      skip('the rendered content is not blank', function(assert) {
        const text = this.element.innerHTML;

        assert.notEqual(text, '', 'html is not empty');
        assert.contains(text, 'imgur');
      });
    });
  });

  module('The media preview is collapsable', async function() {
    module('when collapsed', function() {
      skip('shows nothing', async function() {});

      module('clicking the expand icon', function() {
        skip('shows the content', function() {});
      });
    });

    module('when open', function() {
      skip('the content is visible', function() {});

      module('clicking the collapse icon', function() {
        skip('hides the content', function() {});
      });
    });
  });

  module('Open Graph Data exists', function() {
    skip('renders the image', async function() {});

    skip('there is no sitename', async function() {});
  });

  module('Open Graph Data does not exist', function() {});
});