import { DatePickerProps as MUDatePickerProps } from '@material-ui/pickers';
import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';
import { ButtonProps } from '../Button/types.d';
import { TitleProps } from '../Title/types.d';
import { WrapperProps } from '../Wrapper';

export type CalendarDate = MaterialUiPickersDate;

export interface MonthSelectionProps extends MUDatePickerProps {
  isVisible: boolean;
  titleProps?: TitleProps;
  titleChildren?: string;
  buttonCancel?: ButtonProps;
  buttonSave?: ButtonProps;
}

interface DatePickerForRange extends Omit<MUDatePickerProps, 'onChange' | 'value'> {
  titleProps?: TitleProps;
  titleChildren?: string;
}

export type RangePickerDatesType = {
  firstDate: CalendarDate;
  secondDate: CalendarDate;
};

export interface DateRangePickerProps {
  wrapperProps?: WrapperProps;
  isVisible: boolean;
  firstInitDate: CalendarDate;
  secondInitDate: CalendarDate;
  firstDatePicker: DatePickerForRange;
  secondDatePicker: DatePickerForRange;
  buttonCancel?: ButtonProps;
  buttonSave?: ButtonProps;
  onChange: React.Dispatch<React.SetStateAction<RangePickerDatesType>>;
}
export interface DatePickerWithRangeProps extends Omit<MUDatePickerProps, 'onChange' | 'value'> {
  initDate: CalendarDate;
  onChange: React.Dispatch<React.SetStateAction<RangePickerDatesType>>;
  isVisible: boolean;
}

export type DatePickerWithoutRangeProps = MUDatePickerProps;
export interface DatePickerProps {
  wrapperProps?: WrapperProps;
  isVisible: boolean;
  titleProps?: TitleProps;
  titleChildren?: string;
  buttonCancel?: ButtonProps;
  buttonSave?: ButtonProps;
  params?: Omit<DatePickerWithRangeProps, 'isVisible'> | DatePickerWithoutRangeProps;
  isRange?: boolean | undefined;
}

export type HtmlElementsType = {
  selectedDays: NodeListOf<Element>;
  allDays: NodeListOf<Element>;
  firstMonthDays: NodeListOf<Element>;
  firstHeaderWithMonthAndYear: Element;
};

export interface HtmlElementsTwoMonthType extends HtmlElementsType {
  secondMonthDays: NodeListOf<Element>;
  secondHeaderWithMonthAndYear: Element;
}

export type MonthChangeType = {
  from: string;
  date: CalendarDate;
};
