import { fromArray } from "@hesxenon/prelude/FileList.js";
import { iife } from "@hesxenon/prelude/Function.js";
import {
  describe,
  expect,
  getFormValues,
  it,
  render,
  select,
} from "../../utils/Test";

describe("uwc-input[type=file]", () => {
  it("should show the placeholder when empty", () => {
    const page = render(<uwc-input type="file"></uwc-input>);

    expect(select(page, "uwc-input [part=placeholder]")).to.be.visible;
  });

  it("should not show the placeholder when files exist", () => {
    const page = render(<uwc-input type="file"></uwc-input>);
    const input = select(page, "uwc-input");
    input.files = fromArray([new File([], "foo")]);

    expect(select(page, "uwc-input [part=placeholder]")).to.not.be.visible;
  });

  it("should start with an empty file list", () => {
    const page = render(<uwc-input type="file"></uwc-input>);
    const input = select(page, "uwc-input");
    expect(input.files).to.have.length(0);
  });

  it("should mirror the files of the nested file input", () => {
    const page = render(<uwc-input type="file"></uwc-input>);
    const input = select(page, "uwc-input");
    const file = new File([], "foo");
    const nativeInput = select(input, "input[type=file]");
    nativeInput.files = fromArray([file]);
    nativeInput.dispatchEvent(new Event("change"));
    expect(input.files?.item(0)).to.eq(file);
  });

  it("should be possible to set files programmatically", () => {
    const page = render(<uwc-input type="file"></uwc-input>);
    const input = select(page, "uwc-input");
    const file = new File([], "foo");
    input.files = fromArray([file]);
    expect(input.files?.item(0)).to.eq(file);
  });

  it("should be possible to drop some files on it", () => {
    const page = render(<uwc-input type="file"></uwc-input>);
    const input = select(page, "uwc-input");
    const file = new File([], "foo");

    const dropEvent = new DragEvent("drop", {
      dataTransfer: iife(() => {
        const dt = new DataTransfer();
        dt.items.add(file);
        return dt;
      }),
    });

    input.dispatchEvent(dropEvent);

    expect(input.files?.item(0)).to.eq(file);
  });

  it.todo("should emit an input event when selecting files");

  it.todo(
    "should emit a change event when selecting files through the native input",
  );

  it.todo("should emit a change event on file drop");

  it.todo("always append new files");

  it.todo("should skip files that have already been added");

  it("should be possible to .clear() it", () => {
    const page = render(
      <form>
        <uwc-input name="foo" type="file"></uwc-input>
      </form>,
    );
    const form = select(page, "form");
    const input = select(page, "uwc-input");
    input.files = fromArray([new File([], "foo")]);
    input.clear();
    expect(getFormValues(form)).to.deep.eq({});
    expect(input.files).to.have.length(0);
  });

  describe(":not([multiple])", () => {
    it.todo("should replace the current file");
  });

  describe("validation", () => {
    it("should have .validity.valueMissing if [required] and no files exist", () => {
      const page = render(<uwc-input type="file" required></uwc-input>);

      expect(select(page, "uwc-input").validity).to.include({
        valid: false,
        valueMissing: true,
      });
    });

    it("should have .validity.rangeOverflow if too many files uploaded", () => {
      const page = render(<uwc-input type="file" max="1"></uwc-input>);
      const input = select(page, "uwc-input");

      input.files = fromArray([new File([], "foo"), new File([], "bar")]);

      expect(select(page, "uwc-input").validity).to.include({
        valid: false,
        rangeOverflow: true,
      });
    });

    it("should have .validity.rangeUnderflow if too few files uploaded", () => {
      const page = render(<uwc-input type="file" min="3"></uwc-input>);
      const input = select(page, "uwc-input");

      input.files = fromArray([new File([], "foo"), new File([], "bar")]);

      expect(select(page, "uwc-input").validity).to.include({
        valid: false,
        rangeUnderflow: true,
      });
    });

    it("should have .validity.patternMismatch if some file name mismatches pattern", () => {
      const page = render(<uwc-input type="file" pattern="foo"></uwc-input>);
      const input = select(page, "uwc-input");

      input.files = fromArray([new File([], "foo"), new File([], "bar")]);

      expect(select(page, "uwc-input").validity).to.include({
        valid: false,
        patternMismatch: true,
      });
    });

    it.todo("shuold react to changes of [required]");
    it.todo("shuold react to changes of [min]");
    it.todo("shuold react to changes of [max]");
    it.todo("shuold react to changes of [pattern]");
  });

  describe("a11y", () => {});
});