import React from 'react';
import { DateClickArg, EventClickArg } from '@fullcalendar/react';
import { Dayjs } from 'dayjs';
import { EventContentArg } from '@fullcalendar/core';

type ViewOption = {
  label: string;
  fullCalendarView: string;
  picker: string;
  default?: boolean;
};
type ViewOptionsType = {
  [key: string]: ViewOption;
};
interface EventObject {
  title: string;
  start: Date;
  [key: string]: any;
}
/**
 *
 * A calendar component with daily, weekly, and monthly view options.
 *
 * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/45137335/c1924e09-7cbf-4de0-9b93-c14250c7a500|height=200|width=300)
 *
 * @example 
 *
 *  yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/react @fullcalendar/timegrid
 * @endexample
 * @example 
 *
 * viewOptions: {
 *     ["Daily"]: {
 *       label: "Daily",
 *       fullCalendarView: "timeGridDay",
 *       picker: "day",
 *     },
 *     ["Weekly"]: {
 *       label: "Weekly",
 *       fullCalendarView: "timeGridWeek",
 *       picker: "week",
 *       default: true, //default initial view can be set by adding 'default: true'
 *     },
 *     ["Monthly"]: {
 *       label: "Monthly",
 *       fullCalendarView: "dayGridMonth",
 *       picker: "month",
 *     },
 *   },
 * @endexample
 * @example 
 *
 * import CalendarView from "@bigbinary/neeto-molecules/CalendarView";
 * 
 * const MONTHLY_VIEW = "Monthly";
 * const VIEW_OPTIONS = {
 *   [MONTHLY_VIEW]: {
 *     label: MONTHLY_VIEW,
 *     fullCalendarView: "dayGridMonth",
 *     picker: "month",
 *   },
 * };
 * 
 * const events = [
 *   { title: "Meeting 1", start: new Date() },
 *   { title: "Meeting 2", start: new Date() },
 *   { title: "Meeting 3", start: new Date() },
 * ],
 * 
 * <CalendarView
 *   dayMaxEvents={2}
 *   eventMaxStack={1}
 *   events={events}
 *   viewOptions={VIEW_OPTIONS}
 *   handleDateClick={noop}
 *   handleEventClick={noop}
 * />;
 * @endexample
*/
declare const CalendarView: React.FC<{
  viewOptions: ViewOptionsType;
  events: EventObject[];
  handleDateClick: (info: DateClickArg) => void;
  handleEventClick: (info: EventClickArg) => void;
  onDateChange?: (date: Dayjs) => void;
  eventClassNames: string | ((arg: EventContentArg) => string);
  eventContent?: (arg: EventContentArg) => void;
  dayCellClassNames: string | ((arg: any) => string);
  dayMaxEvents: number;
  eventMaxStack: number;
  validDates?: {
    start: Dayjs | Date | null;
    end: Dayjs | Date | null;
  };
  hideHeader?: boolean;
  locale?: string;
}>;

export { CalendarView as default };