import React from "react";
import { MultiColumnComboBoxProps } from "./MultiColumnComboBoxProps";
import { MultiColumnComboBox as KendoMultiColumnComboBox } from "@progress/kendo-react-dropdowns";

const MultiColumnComboBox: React.FC<MultiColumnComboBoxProps> = ({
  dataTestId,
  accessKey,
  adaptive,
  adaptiveFilter,
  adaptiveTitle,
  allowCustom,
  ariaDescribedBy,
  ariaLabelledBy,
  className,
  clearButton,
  columns,
  data,
  dataItemKey,
  defaultValue,
  dir,
  disabled,
  fillMode,
  filter,
  filterable,
  footer,
  groupField,
  groupMode,
  header,
  iconClassName,
  id,
  label,
  loading,
  name,
  opened,
  placeholder,
  popupSettings,
  required,
  rounded,
  size,
  skipDisabledItems,
  style,
  suggest,
  svgIcon,
  tabIndex,
  textField,
  title,
  valid,
  validationMessage,
  validityStyles,
  value,
  virtual,
  focusedItemIndex,
  groupHeaderItemRender,
  groupStickyHeaderItemRender,
  itemRender,
  listNoDataRender,
  onBlur,
  onChange,
  onClose,
  onFilterChange,
  onFocus,
  onOpen,
  onPageChange,
  valueRender,
}) => (
  <div data-test-id={dataTestId}>
    <KendoMultiColumnComboBox
      accessKey={accessKey}
      adaptive={adaptive}
      adaptiveFilter={adaptiveFilter}
      adaptiveTitle={adaptiveTitle}
      allowCustom={allowCustom}
      ariaDescribedBy={ariaDescribedBy}
      ariaLabelledBy={ariaLabelledBy}
      className={className}
      clearButton={clearButton}
      columns={columns}
      data={data}
      dataItemKey={dataItemKey}
      defaultValue={defaultValue}
      dir={dir}
      disabled={disabled}
      fillMode={fillMode}
      filter={filter}
      filterable={filterable}
      footer={footer}
      groupField={groupField}
      groupMode={groupMode}
      header={header}
      iconClassName={iconClassName}
      id={id}
      label={label}
      loading={loading}
      name={name}
      opened={opened}
      placeholder={placeholder}
      popupSettings={popupSettings}
      required={required}
      rounded={rounded}
      size={size}
      skipDisabledItems={skipDisabledItems}
      style={style}
      suggest={suggest}
      svgIcon={svgIcon}
      tabIndex={tabIndex}
      textField={textField}
      title={title}
      valid={valid}
      validationMessage={validationMessage}
      validityStyles={validityStyles}
      value={value}
      virtual={virtual}
      focusedItemIndex={focusedItemIndex}
      groupHeaderItemRender={groupHeaderItemRender}
      groupStickyHeaderItemRender={groupStickyHeaderItemRender}
      itemRender={itemRender}
      listNoDataRender={listNoDataRender}
      onBlur={onBlur}
      onChange={onChange}
      onClose={onClose}
      onFilterChange={onFilterChange}
      onFocus={onFocus}
      onOpen={onOpen}
      onPageChange={onPageChange}
      valueRender={valueRender}
    />
  </div>
);

export default MultiColumnComboBox;