import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { MultiColumnComboBoxProps } from "../MultiColumnComboBoxProps";
import MultiColumnComboBox from "../MultiColumnComboBox";

describe("MultiColumnComboBox Component", () => {
  const props: MultiColumnComboBoxProps = {
    dataTestId: "test-id",
    accessKey: "key",
    adaptive: true,
    adaptiveFilter: "filter",
    adaptiveTitle: "Adaptive Title",
    allowCustom: false,
    ariaDescribedBy: "description",
    ariaLabelledBy: "labelledby",
    className: "custom-class",
    clearButton: true,
    columns: [
      {
        field: "id",
        header: "ID",
        width: "100px",
      },
      {
        field: "name",
        header: "Name",
        width: "300px",
      },
      {
        field: "position",
        header: "Position",
        width: "300px",
      },
    ],
    data: [
      { text: "Item1", value: 1 },
      { text: "Item2", value: 2 },
    ],
    dataItemKey: "value",
    defaultValue: { text: "Item1", value: 1 },
    dir: "ltr",
    disabled: false,
    fillMode: "solid",
    filter: "filter-value",
    filterable: true,
    footer: <div>Footer</div>,
    groupField: "group",
    groupMode: "modern",
    header: <div>Header</div>,
    iconClassName: "icon-class",
    id: "multicolumncombobox-id",
    label: "MultiColumnComboBoxLabel",
    loading: false,
    name: "multicolumncombobox-name",
    opened: false,
    placeholder: "placeholder",
    popupSettings: { className: "popup-class" },
    required: true,
    rounded: "medium",
    size: "medium",
    skipDisabledItems: true,
    style: { color: "blue" },
    suggest: false,
    svgIcon: {
      name: "exampleIcon",
      content:
        '<path d="M112 32c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zM64 160v288h96V160H64zm128 0v288h96V288c0-32 32-32 32-32s32 0 32 32v160h96V290.9c0-66.5-13.6-130.9-96-130.9-36.2 0-62.9 32-64 44.9V160h-96z" />',
      viewBox: "0 0 24 24",
    },
    tabIndex: 0,
    textField: "text",
    title: "MultiColumnComboBoxTitle",
    valid: true,
    validationMessage: "Validation message",
    validityStyles: false,
    value: { text: "Item2", value: 2 },
  };

  it("renders all props correctly", () => {
    render(<MultiColumnComboBox {...props} />);
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(<MultiColumnComboBox {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;

    cleanFragment.querySelectorAll("[aria-owns]").forEach((el) => {
      el.removeAttribute("aria-owns");
    });

    expect(cleanFragment).toMatchSnapshot();
  });
});