import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { render } from "@ember/test-helpers";
import { hbs } from "ember-cli-htmlbars";
import selectKit from "discourse/tests/helpers/select-kit-helper";
import { exists, paste, query } from "discourse/tests/helpers/qunit-helpers";

const DEFAULT_CONTENT = [
  { id: 1, name: "foo" },
  { id: 2, name: "bar" },
  { id: 3, name: "baz" },
];

const setDefaultState = (ctx, options) => {
  const properties = Object.assign(
    {
      content: DEFAULT_CONTENT,
      value: null,
    },
    options || {}
  );
  ctx.setProperties(properties);
};

module("Integration | Component | select-kit/multi-select", function (hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function () {
    this.set("subject", selectKit());
  });

  test("content", async function (assert) {
    setDefaultState(this);

    await render(hbs`
      <MultiSelect
        @value={{this.value}}
        @content={{this.content}}
      />
    `);

    await this.subject.expand();

    const content = this.subject.displayedContent();
    assert.strictEqual(content.length, 3, "it shows rows");
    assert.strictEqual(
      content[0].name,
      this.content.firstObject.name,
      "it has the correct name"
    );
    assert.strictEqual(
      content[0].id,
      this.content.firstObject.id.toString(),
      "it has the correct value"
    );
    assert.strictEqual(
      this.subject.header().value(),
      null,
      "it doesn't set a value from the content"
    );
  });

  test("maximum=1", async function (assert) {
    setDefaultState(this);

    await render(hbs`
      <MultiSelect
        @value={{this.value}}
        @content={{this.content}}
        @options={{hash maximum=1}}
      />
    `);

    await this.subject.expand();
    await this.subject.selectRowByValue(1);

    assert.notOk(this.subject.isExpanded(), "it closes the dropdown");

    await this.subject.expand();
    await this.subject.deselectItemByValue(1);

    assert.ok(
      this.subject.isExpanded(),
      "it doesn’t close the dropdown when no selection has been made"
    );
  });

  test("maximum=2", async function (assert) {
    setDefaultState(this);

    await render(hbs`
      <MultiSelect
        @value={{this.value}}
        @content={{this.content}}
        @options={{hash maximum=2}}
      />
    `);

    await this.subject.expand();
    await this.subject.selectRowByValue(1);

    assert.ok(this.subject.isExpanded(), "it doesn’t close the dropdown");
  });

  test("pasting", async function (assert) {
    setDefaultState(this);

    await render(hbs`
      <MultiSelect
        @value={{this.value}}
        @content={{this.content}}
        @options={{hash maximum=2}}
      />
    `);

    await this.subject.expand();
    await paste(query(".filter-input"), "foo|bar");

    assert.equal(this.subject.header().value(), "1,2");
  });

  test("no value property with no content", async function (assert) {
    setDefaultState(this);

    await render(hbs`
      <MultiSelect @valueProperty={{null}} />
    `);
    await this.subject.expand();

    assert.notOk(
      exists(".selected-content"),
      "it doesn’t render an empty content div"
    );
  });
});