import React from "react";
import { MultiViewCalendarProps } from "./MultiViewCalendarProps";
import { MultiViewCalendar as KendoMultiViewCalendar } from "@progress/kendo-react-dateinputs";

const MultiViewCalendar: React.FC<MultiViewCalendarProps> = ({
  dataTestId,
  activeRangeEnd,
  allowReverse,
  ariaDescribedBy,
  ariaLabelledBy,
  bottomView,
  cell,
  className,
  defaultActiveView,
  defaultValue,
  disabled,
  focusedDate,
  headerTitle,
  id,
  max,
  min,
  mode,
  tabIndex,
  topView,
  value,
  views,
  weekCell,
  weekNumber,
  onBlur,
  onChange,
  onFocus,
}) => (
  <div data-test-id={dataTestId}>
    <KendoMultiViewCalendar
      activeRangeEnd={activeRangeEnd}
      allowReverse={allowReverse}
      ariaDescribedBy={ariaDescribedBy}
      ariaLabelledBy={ariaLabelledBy}
      bottomView={bottomView}
      cell={cell}
      className={className}
      defaultActiveView={defaultActiveView}
      defaultValue={defaultValue}
      disabled={disabled}
      focusedDate={focusedDate}
      headerTitle={headerTitle}
      id={id}
      max={max}
      min={min}
      mode={mode}
      tabIndex={tabIndex}
      topView={topView}
      value={value}
      views={views}
      weekCell={weekCell}
      weekNumber={weekNumber}
      onBlur={(event: React.FocusEvent<any, Element>) =>
        onBlur?.(event.nativeEvent)
      }
      onChange={onChange}
      onFocus={(event: React.FocusEvent<any>) => onFocus?.(event.nativeEvent)}
    />
  </div>
);

export default MultiViewCalendar;