import React from "react";
import { DateRangePickerProps } from "./DateRangePickerProps";
import { DateRangePicker as KendoDateRangePicker } from "@progress/kendo-react-dateinputs";

const DateRangePicker: React.FC<DateRangePickerProps> = ({
  dataTestId,
  adaptive,
  adaptiveTitle,
  allowReverse,
  ariaDescribedBy,
  ariaLabelledBy,
  calendar,
  calendarSettings,
  className,
  defaultShow,
  defaultValue,
  disabled,
  endDateInput,
  endDateInputSettings,
  focusedDate,
  format,
  id,
  max,
  min,
  popup,
  popupSettings,
  show,
  startDateInput,
  startDateInputSettings,
  style,
  swapButton,
  tabIndex,
  valid,
  value,
  onBlur,
  onCancel,
  onChange,
  onClose,
  onFocus,
  onOpen,
}) => (
  <div data-test-id={dataTestId}>
    <KendoDateRangePicker
      adaptive={adaptive}
      adaptiveTitle={adaptiveTitle}
      allowReverse={allowReverse}
      ariaDescribedBy={ariaDescribedBy}
      ariaLabelledBy={ariaLabelledBy}
      calendar={calendar}
      calendarSettings={calendarSettings}
      className={className}
      defaultShow={defaultShow}
      defaultValue={defaultValue}
      disabled={disabled}
      endDateInput={endDateInput}
      endDateInputSettings={endDateInputSettings}
      focusedDate={focusedDate}
      format={format}
      id={id}
      max={max}
      min={min}
      popup={popup}
      popupSettings={popupSettings}
      show={show}
      startDateInput={startDateInput}
      startDateInputSettings={startDateInputSettings}
      style={style}
      swapButton={swapButton}
      tabIndex={tabIndex}
      valid={valid}
      value={value}
      onBlur={onBlur}
      onCancel={onCancel}
      onChange={onChange}
      onClose={onClose}
      onFocus={onFocus}
      onOpen={onOpen}
    />
  </div>
);

export default DateRangePicker;