import userEvent from "@testing-library/user-event";
import { render, screen, waitFor } from "@testing-library/react";
import { expect } from "vitest";
import React, { FormEvent, useState } from "react";
import { Select, Option } from ":/components/Forms/Select/index";
import { Button } from ":/components/Button";
import { CunninghamProvider } from ":/components/Provider";
import {
  expectMenuToBeClosed,
  expectMenuToBeOpen,
  expectNoOptions,
  expectOptions,
  expectOptionToBeDisabled,
  expectOptionToBeSelected,
  expectOptionToBeUnselected,
} from ":/components/Forms/Select/test-utils";
import { Input } from ":/components/Forms/Input";

describe("<Select/>", () => {
  describe("Searchable", () => {
    it("shows all options when clicking on the input", async () => {
      const user = userEvent.setup();
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "Panama",
              },
              {
                label: "London",
              },
              {
                label: "New York",
              },
              {
                label: "Tokyo",
              },
            ]}
            searchable={true}
          />
        </CunninghamProvider>,
      );

      const input = screen.getByRole("combobox", {
        name: "City",
      });
      // It returns the input.
      expect(input.tagName).toEqual("INPUT");

      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });

      expectMenuToBeClosed(menu);

      // Click on the input.
      await user.click(input);
      expectMenuToBeOpen(menu);
      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);

      // Select an option.
      const option: HTMLLIElement = screen.getByRole("option", {
        name: "New York",
      });
      await user.click(option);

      // The menu should be closed.
      expectMenuToBeClosed(menu);

      // The input should have the selected value.
      expect(input).toHaveValue("New York");
    });
    it("filters options when typing", async () => {
      const user = userEvent.setup();
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "Panama",
                value: "panama",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            searchable={true}
          />
        </CunninghamProvider>,
      );

      const input = screen.getByRole("combobox", {
        name: "City",
      });
      // It returns the input.
      expect(input.tagName).toEqual("INPUT");

      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });

      expectMenuToBeClosed(menu);

      // Click on the input.
      await user.click(input);
      expectMenuToBeOpen(menu);
      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);

      // Verify that filtering works.
      await user.type(input, "Pa");
      expectMenuToBeOpen(menu);
      expectOptions(["Paris", "Panama"]);

      await user.type(input, "r");
      expectOptions(["Paris"]);

      // Select option.
      const option: HTMLLIElement = screen.getByRole("option", {
        name: "Paris",
      });
      await user.click(option);

      expect(input).toHaveValue("Paris");
    });
    it("clears the text input if no item is selected", async () => {
      const Wrapper = () => {
        const [value, setValue] = useState<string | number | undefined>();
        return (
          <CunninghamProvider>
            <div>Value = {value}|</div>
            <Select
              label="City"
              options={[
                {
                  label: "Paris",
                  value: "paris",
                },
                {
                  label: "Panama",
                  value: "panama",
                },
                {
                  label: "London",
                  value: "london",
                },
                {
                  label: "New York",
                  value: "new_york",
                },
                {
                  label: "Tokyo",
                  value: "tokyo",
                },
              ]}
              searchable={true}
              value={value}
              onChange={(e) => setValue(e.target.value as any)}
            />
            <Input name="Something else" />
          </CunninghamProvider>
        );
      };
      render(<Wrapper />);

      const user = userEvent.setup();
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      screen.getByText("Value = |");
      // It returns the input.
      expect(input.tagName).toEqual("INPUT");

      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });

      expectMenuToBeClosed(menu);

      // Click on the input.
      await user.click(input);
      expectMenuToBeOpen(menu);
      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);

      // Verify that filtering works.
      await user.type(input, "Pa");
      expectMenuToBeOpen(menu);
      expectOptions(["Paris", "Panama"]);

      await user.type(input, "rr");
      expectNoOptions();

      expect(input).toHaveValue("Parr");

      // This is a way to blur the combobox.
      await user.click(screen.getByRole("textbox"));

      expect(input).toHaveValue("");
      screen.getByText("Value = |");
    });
    it("clears the added text to the existing value input on blur if no other item is selected", async () => {
      const Wrapper = () => {
        const [value, setValue] = useState<string | number | undefined>(
          "london",
        );
        return (
          <CunninghamProvider>
            <div>Value = {value}|</div>
            <Select
              label="City"
              options={[
                {
                  label: "Paris",
                  value: "paris",
                },
                {
                  label: "Panama",
                  value: "panama",
                },
                {
                  label: "London",
                  value: "london",
                },
                {
                  label: "New York",
                  value: "new_york",
                },
                {
                  label: "Tokyo",
                  value: "tokyo",
                },
              ]}
              searchable={true}
              value={value}
              onChange={(e) => setValue(e.target.value as any)}
            />
            <Input name="Something else" />
          </CunninghamProvider>
        );
      };
      render(<Wrapper />);

      const user = userEvent.setup();
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      screen.getByText("Value = london|");
      // It returns the input.
      expect(input.tagName).toEqual("INPUT");

      expect(input).toHaveValue("London");
      await user.type(input, "rr");
      expect(input).toHaveValue("Londonrr");

      // This is a way to blur the combobox.
      await user.click(screen.getByRole("textbox"));

      expect(input).toHaveValue("London");
      screen.getByText("Value = london|");
    });
    it("clears value", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "Panama",
              },
              {
                label: "London",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            searchable={true}
            defaultValue="new_york"
          />
        </CunninghamProvider>,
      );

      const user = userEvent.setup();
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      expect(input).toHaveValue("New York");

      // Clear selection.
      const clearButton = screen.getByRole("button", {
        name: "Clear selection",
      });
      await user.click(clearButton);
      expect(input).toHaveValue("");
    });
    it("should select with defaultValue using label", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "Panama",
              },
              {
                label: "London",
              },
              {
                label: "New York",
              },
              {
                label: "Tokyo",
              },
            ]}
            searchable={true}
            defaultValue="New York"
          />
        </CunninghamProvider>,
      );

      const input = screen.getByRole("combobox", {
        name: "City",
      });
      expect(input).toHaveValue("New York");
    });
    it("should select with defaultValue using value", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "Panama",
              },
              {
                label: "London",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            searchable={true}
            defaultValue="new_york"
          />
        </CunninghamProvider>,
      );

      const input = screen.getByRole("combobox", {
        name: "City",
      });
      expect(input).toHaveValue("New York");
    });
    it("should not select any value if there is not match", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "Panama",
              },
              {
                label: "London",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            searchable={true}
            defaultValue="not_found"
          />
        </CunninghamProvider>,
      );

      const input = screen.getByRole("combobox", {
        name: "City",
      });
      expect(input).toHaveValue("");
    });
    it("works controlled", async () => {
      const Wrapper = () => {
        const [value, setValue] = useState<string | number | undefined>(
          "london",
        );
        const [onChangeCounts, setOnChangeCounts] = useState(0);
        return (
          <CunninghamProvider>
            <div>
              <div>Value = {value}|</div>
              <div>onChangeCounts = {onChangeCounts}|</div>
              <Button onClick={() => setValue(undefined)}>Clear</Button>
              <Button onClick={() => setValue("paris")}>Set Paris</Button>
              <Select
                label="City"
                options={[
                  {
                    label: "Paris",
                    value: "paris",
                  },
                  {
                    label: "London",
                    value: "london",
                  },
                  {
                    label: "New York",
                    value: "new_york",
                  },
                  {
                    label: "Tokyo",
                    value: "tokyo",
                  },
                ]}
                value={value}
                onChange={(e) => {
                  setValue(e.target.value as string);
                  setOnChangeCounts(onChangeCounts + 1);
                }}
                searchable={true}
              />
            </div>
          </CunninghamProvider>
        );
      };
      render(<Wrapper />);

      const input = screen.getByRole("combobox", {
        name: "City",
      });

      // Make sure value is selected.
      screen.getByText("Value = london|");
      screen.getByText("onChangeCounts = 0|");

      // Change value.
      const user = userEvent.setup();
      await user.click(input);

      // Make sure the option is selected.
      const option: HTMLLIElement = screen.getByRole("option", {
        name: "London",
      });
      expectOptionToBeSelected(option);

      // List should display all available options when re-opening.
      expectOptions(["Paris", "London", "New York", "Tokyo"]);

      // Clear value.
      const button = screen.getByRole("button", {
        name: "Clear",
      });
      await user.click(button);
      screen.getByText("Value = |");
      await screen.findByText("onChangeCounts = 0|");

      // Select an option.
      await user.click(input);
      await user.click(
        screen.getByRole("option", {
          name: "New York",
        }),
      );

      // Make sure value is selected.
      screen.getByText("Value = new_york|");
      screen.getByText("onChangeCounts = 1|");

      // clear value.
      await user.click(button);

      // Make sure value is cleared.
      screen.getByText("Value = |");

      // Make sure setting value works
      const buttonParis = screen.getByRole("button", {
        name: "Set Paris",
      });
      await user.click(buttonParis);

      screen.getByText("Value = paris|");
      expect(input).toHaveValue("Paris");
      screen.getByText("onChangeCounts = 1|");
    });
    it("renders disabled", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            disabled={true}
            searchable={true}
          />
        </CunninghamProvider>,
      );
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      expect(input).toHaveAttribute("disabled");

      const button: HTMLButtonElement = document.querySelector(
        ".c__select__inner__actions__open",
      )!;
      expect(button).toBeDisabled();

      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      expectMenuToBeClosed(menu);

      const user = userEvent.setup();

      // Try to open the menu.
      await user.click(input);

      // Make sure menu is still closed.
      expectMenuToBeClosed(menu);

      // Make sure no value is rendered
      const valueRendered = document.querySelector(".c__select__inner__value");
      expect(valueRendered).toHaveTextContent("");

      // Try to type
      await user.type(input, "Pa");
      expectMenuToBeClosed(menu);
    });
    it("submits form data", async () => {
      let formData: any;
      const Wrapper = () => {
        const onSubmit = (e: FormEvent<HTMLFormElement>) => {
          e.preventDefault();
          const data = new FormData(e.currentTarget);
          formData = {
            city: data.get("city"),
          };
        };

        return (
          <CunninghamProvider>
            <div>
              <form onSubmit={onSubmit}>
                <Select
                  label="City"
                  name="city"
                  options={[
                    {
                      label: "Paris",
                      value: "paris",
                    },
                    {
                      label: "London",
                      value: "london",
                    },
                    {
                      label: "New York",
                      value: "new_york",
                    },
                    {
                      label: "Tokyo",
                      value: "tokyo",
                    },
                  ]}
                  searchable={true}
                />
                <Button>Submit</Button>
              </form>
            </div>
          </CunninghamProvider>
        );
      };
      render(<Wrapper />);

      const user = userEvent.setup();
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      const button = screen.getByRole("button", {
        name: "Submit",
      });

      // Submit the form being empty.
      await user.click(button);
      expect(formData).toEqual({
        city: null,
      });

      // Try to type something and verify that is does not submit it.
      await user.type(input, "Pa");
      await user.click(button);
      expect(formData).toEqual({
        city: null,
      });

      // Select an option
      await user.clear(input);
      await user.click(input);
      expectMenuToBeOpen(menu);

      await user.click(
        screen.getByRole("option", {
          name: "New York",
        }),
      );

      // Submit the form being fulfilled.
      await user.click(button);
      expect(formData).toEqual({
        city: "new_york",
      });

      // Clear selection.
      const clearButton = screen.getByRole("button", {
        name: "Clear selection",
      });
      await userEvent.click(clearButton);

      // Submit again.
      await user.click(button);
      expect(formData).toEqual({
        city: null,
      });
    });

    [
      {
        defaultValue: "panama",
        type: "default value",
        expected: "Panama",
      },
      {
        value: "panama",
        type: "value",
        expected: "Panama",
      },
      {
        type: "without values props",
        expected: "",
      },
    ].forEach(({ type, expected, ...props }) => {
      it(`render mutated option when select open and keep the filter activated with ${type}`, async () => {
        const myOptions = [
          {
            label: "Paris",
            value: "paris",
          },
          {
            label: "Panama",
            value: "panama",
          },
          {
            label: "London",
            value: "london",
          },
        ];

        const Wrapper = ({ options }: { options: Option[] }) => {
          return (
            <Select
              label="City"
              name="city"
              options={options}
              searchable={true}
              {...props}
            />
          );
        };

        const { rerender } = render(<Wrapper options={myOptions} />, {
          wrapper: CunninghamProvider,
        });

        const user = userEvent.setup();
        const input = screen.getByRole("combobox", {
          name: "City",
        });
        const menu: HTMLDivElement = screen.getByRole("listbox", {
          name: "City",
        });

        // Check init value (defaultValue / value / nothing)
        expect(input).toHaveValue(expected);

        // Add filter
        await user.clear(input);
        await user.type(input, "Pa");

        expectMenuToBeOpen(menu);

        expectOptions(["Paris", "Panama"]);

        myOptions.shift();

        // Rerender the select with the options mutated
        rerender(<Wrapper options={[...myOptions]} />);

        expectMenuToBeOpen(menu);

        // Options is refreshed
        expectOptions(["Panama"]);

        // Filter is still active
        expect(input).toHaveValue("Pa");

        myOptions.shift();

        // Rerender the select with the options mutated (only london left)
        rerender(<Wrapper options={[...myOptions]} />);

        // Filter is still active
        expect(input).toHaveValue("Pa");

        expect(screen.getByText("No options available")).toBeInTheDocument();

        await user.clear(input);

        expectOptions(["London"]);

        await user.click(
          screen.getByRole("option", {
            name: "London",
          }),
        );

        expect(input).toHaveValue("London");
      });
    });
  });

  describe("Simple", () => {
    it("should select an option and unselect it", async () => {
      const user = userEvent.setup();
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "London",
              },
              {
                label: "New York",
              },
              {
                label: "Tokyo",
              },
            ]}
          />
        </CunninghamProvider>,
      );
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      const label = screen.getByText("City");
      const valueRendered = document.querySelector(".c__select__inner__value");

      // Make sure no value is rendered.
      expect(valueRendered).toHaveTextContent("");
      expectMenuToBeClosed(menu);
      expect(
        screen.queryByRole("option", { name: "Paris" }),
      ).not.toBeInTheDocument();

      // Make sure the label is set as placeholder.
      expect(Array.from(label.classList)).toContain("placeholder");

      await user.click(input);

      // Make sure the menu is opened and options are rendered.
      expectMenuToBeOpen(menu);
      expect(
        screen.queryByRole("option", { name: "Paris" }),
      ).toBeInTheDocument();

      // Make sure the option is not selected.
      let option: HTMLLIElement = screen.getByRole("option", {
        name: "London",
      });
      expectOptionToBeUnselected(option);

      // Select an option.
      await user.click(option);

      // Make sure option is selected.
      expect(valueRendered).toHaveTextContent("London");
      expect(Array.from(label.classList)).not.toContain("placeholder");

      // Make sure menu is automatically closed.
      expectMenuToBeClosed(menu);

      // Open it again
      await user.click(input);

      expectMenuToBeOpen(menu);

      // Make sure the option is marked as selected.
      option = screen.getByRole("option", { name: "London" });
      expectOptionToBeSelected(option);

      // Clear selection.
      const clearButton = screen.getByRole("button", {
        name: "Clear selection",
      });
      await userEvent.click(clearButton);

      // Make sure value is cleared.
      expect(valueRendered).toHaveTextContent("");
      expect(Array.from(label.classList)).toContain("placeholder");

      // Make sure the option is unselected.
      option = screen.getByRole("option", { name: "London" });
      await waitFor(() => expectOptionToBeUnselected(option));
    });
    it("should select with defaultValue using label", () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "London",
              },
              {
                label: "New York",
              },
              {
                label: "Tokyo",
              },
            ]}
            defaultValue="Tokyo"
          />
        </CunninghamProvider>,
      );
      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      const label = screen.getByText("City");
      const valueRendered = document.querySelector(".c__select__inner__value");

      // Make sure option is selected.
      expect(valueRendered).toHaveTextContent("Tokyo");
      expect(Array.from(label.classList)).not.toContain("placeholder");

      // Make sure menu is automatically closed.
      expectMenuToBeClosed(menu);
    });
    it("should select with defaultValue using value", () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            defaultValue="new_york"
          />
        </CunninghamProvider>,
      );
      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      const label = screen.getByText("City");
      const valueRendered = document.querySelector(".c__select__inner__value");

      // Make sure option is selected.
      expect(valueRendered).toHaveTextContent("New York");
      expect(Array.from(label.classList)).not.toContain("placeholder");

      // Make sure menu is automatically closed.
      expectMenuToBeClosed(menu);
    });
    it("works controlled", async () => {
      const Wrapper = () => {
        const [value, setValue] = useState<string | number | undefined>(
          "london",
        );
        return (
          <CunninghamProvider>
            <div>
              <div>Value = {value}|</div>
              <Button onClick={() => setValue(undefined)}>Clear</Button>
              <Select
                label="City"
                options={[
                  {
                    label: "Paris",
                    value: "paris",
                  },
                  {
                    label: "London",
                    value: "london",
                  },
                  {
                    label: "New York",
                    value: "new_york",
                  },
                  {
                    label: "Tokyo",
                    value: "tokyo",
                  },
                ]}
                value={value}
                onChange={(e) => setValue(e.target.value as string)}
              />
            </div>
          </CunninghamProvider>
        );
      };
      render(<Wrapper />);

      const input = screen.getByRole("combobox", {
        name: "City",
      });

      // Make sure value is selected.
      screen.getByText("Value = london|");

      // Change value.
      const user = userEvent.setup();
      await user.click(input);

      // Make sure the option is selected.
      const option: HTMLLIElement = screen.getByRole("option", {
        name: "London",
      });
      expectOptionToBeSelected(option);

      // Select an option.
      await user.click(
        screen.getByRole("option", {
          name: "New York",
        }),
      );

      // Make sure value is selected.
      screen.getByText("Value = new_york|");

      // clear value.
      const button = screen.getByRole("button", {
        name: "Clear",
      });
      await user.click(button);

      // Make sure value is cleared.
      screen.getByText("Value = |");
    });

    it("renders disabled", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            disabled={true}
          />
        </CunninghamProvider>,
      );
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      expect(input).toHaveAttribute("disabled");

      const button: HTMLButtonElement = document.querySelector(
        ".c__select__inner__actions__open",
      )!;
      expect(button).toBeDisabled();

      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      expectMenuToBeClosed(menu);

      const user = userEvent.setup();

      // Try to open the menu.
      await user.click(input);

      // Make sure menu is still closed.
      expectMenuToBeClosed(menu);

      // Make sure no value is rendered
      const valueRendered = document.querySelector(".c__select__inner__value");
      expect(valueRendered).toHaveTextContent("");
    });
    it("renders with text", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            text="This is a text"
          />
        </CunninghamProvider>,
      );
      screen.getByText("This is a text");
    });
    it("renders with state=error", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            text="This is a text"
            state="error"
          />
        </CunninghamProvider>,
      );
      expect(
        document.querySelector(".c__select.c__select--error"),
      ).toBeInTheDocument();
    });
    it("renders with state=success", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
                value: "paris",
              },
              {
                label: "London",
                value: "london",
              },
              {
                label: "New York",
                value: "new_york",
              },
              {
                label: "Tokyo",
                value: "tokyo",
              },
            ]}
            text="This is a text"
            state="success"
          />
        </CunninghamProvider>,
      );
      expect(
        document.querySelector(".c__select.c__select--success"),
      ).toBeInTheDocument();
    });
    it("submits form data", async () => {
      let formData: any;
      const Wrapper = () => {
        const onSubmit = (e: FormEvent<HTMLFormElement>) => {
          e.preventDefault();
          const data = new FormData(e.currentTarget);
          formData = {
            city: data.get("city"),
          };
        };

        return (
          <CunninghamProvider>
            <div>
              <form onSubmit={onSubmit}>
                <Select
                  label="City"
                  name="city"
                  options={[
                    {
                      label: "Paris",
                      value: "paris",
                    },
                    {
                      label: "London",
                      value: "london",
                    },
                    {
                      label: "New York",
                      value: "new_york",
                    },
                    {
                      label: "Tokyo",
                      value: "tokyo",
                    },
                  ]}
                />
                <Button>Submit</Button>
              </form>
            </div>
          </CunninghamProvider>
        );
      };
      render(<Wrapper />);

      const user = userEvent.setup();
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      const button = screen.getByRole("button", {
        name: "Submit",
      });

      // Submit the form being empty.
      await user.click(button);
      expect(formData).toEqual({
        city: null,
      });

      // Select an option
      await user.click(input);
      expectMenuToBeOpen(menu);

      await user.click(
        screen.getByRole("option", {
          name: "New York",
        }),
      );

      // Submit the form being fulfilled.
      await user.click(button);
      expect(formData).toEqual({
        city: "new_york",
      });

      // Clear selection.
      const clearButton = screen.getByRole("button", {
        name: "Clear selection",
      });
      await userEvent.click(clearButton);

      // Submit again.
      await user.click(button);
      expect(formData).toEqual({
        city: null,
      });
    });

    it("should not be clearable", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "London",
              },
              {
                label: "New York",
              },
              {
                label: "Tokyo",
              },
            ]}
            clearable={false}
            defaultValue="Paris"
          />
        </CunninghamProvider>,
      );
      screen.getByRole("combobox", {
        name: "City",
      });
      const valueRendered = document.querySelector(".c__select__inner__value");

      // Make sure default value is rendered.
      expect(valueRendered).toHaveTextContent("Paris");
      // Make sure the clear button is not rendered.
      expect(
        screen.queryByRole("button", {
          name: "Clear selection",
        }),
      ).not.toBeInTheDocument();
    });
    it("is not possible to select disabled options", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "London",
              },
              {
                label: "New York",
                disabled: true,
              },
              {
                label: "Tokyo",
              },
            ]}
          />
        </CunninghamProvider>,
      );
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      const menu: HTMLDivElement = screen.getByRole("listbox", {
        name: "City",
      });
      const valueRendered = document.querySelector(".c__select__inner__value");

      // Make sure the select is empty.
      expect(valueRendered).toHaveTextContent("");

      const user = userEvent.setup();
      await user.click(input);
      expectMenuToBeOpen(menu);

      // Make sure the disabled option is not selectable.
      let option: HTMLLIElement = screen.getByRole("option", {
        name: "New York",
      });
      expectOptionToBeDisabled(option);

      // Try to click on the disabled option.
      await user.click(option);

      expectMenuToBeOpen(menu);
      // Make sure the select is still empty.
      expect(valueRendered).toHaveTextContent("");

      // Select a not disabled option.
      option = screen.getByRole("option", {
        name: "Tokyo",
      });

      await user.click(option);
      expectMenuToBeClosed(menu);
      expect(valueRendered).toHaveTextContent("Tokyo");
    });

    it("is accessible if the the label is not shown", async () => {
      render(
        <CunninghamProvider>
          <Select
            label="City"
            options={[
              {
                label: "Paris",
              },
              {
                label: "London",
              },
              {
                label: "New York",
                disabled: true,
              },
              {
                label: "Tokyo",
              },
            ]}
            hideLabel={true}
          />
        </CunninghamProvider>,
      );
      // Make sure the input is accessible.
      screen.getByRole("combobox", {
        name: "City",
      });
      const label = screen.getByText("City");
      expect(Array.from(label.classList)).toContain("offscreen");
    });

    it("renders menu empty placeholder when there are no options to display", async () => {
      render(
        <CunninghamProvider>
          <Select label="City" options={[]} hideLabel={true} />
        </CunninghamProvider>,
      );
      const input = screen.getByRole("combobox", {
        name: "City",
      });
      const user = userEvent.setup();
      await user.click(input);
      screen.getByText("No options available");
    });
  });
});