import React from 'react';
import { Dayjs } from 'dayjs';
import { DatePickerProps } from '@bigbinary/neetoui';

interface TimePeriodType {
  startDate: Dayjs;
  endDate: Dayjs;
  rangeType: string;
}
/**
 *
 * A common component to manage your date range filters.
 *
 * ![Screenshot](https://user-images.githubusercontent.com/45137335/221573730-3195ac05-6cf2-4b45-bfe9-427b077cec07.png|height=200|width=300)
 *
 * ![Screenshot](https://user-images.githubusercontent.com/45137335/221578791-74b1c235-9287-4650-9d9b-6774df1d689d.png|height=200|width=300)
 *
 * @example 
 *
 * import DateRangeFilter from "@bigbinary/neeto-molecules/DateRangeFilter";
 * const DateRangeFilterActionBlock = (
 *   {
 *     //pass the necessary props
 *   }
 * ) => {
 *   const [timePeriod, setTimePeriod] = useState(INITIAL_TIME_PERIOD_VALUE);
 *   //INITIAL_TIME_PERIOD_VALUE  will be an object with label,value and rangeType as keys
 *   return (
 *     <DateRangeFilter
 *       timePeriod={timePeriod}
 *       setTimePeriod={setTimePeriod}
 *       timePeriodOptions={[
 *         {
 *           label: "New filter label",
 *           value: {startDate:  pass dayjs object , endDate:  pass dayjs object , rangeType: "new_range_type"},
 *         },
 *       ]} // pass this prop only if you want to override default filters available
 *     />
 *   );
 * };
 * @endexample
 * Note: The value of timePeriod state will contain the startDate, endDate and
 *
 * range_type of the selected filter. This can be passed into the filterParams of
 *
 * your API.
 *
*/
declare const DateRangeFilter: React.FC<{
  timePeriod: TimePeriodType;
  setTimePeriod: React.Dispatch<React.SetStateAction<TimePeriodType>>;
  timePeriodOptions?: TimePeriodType[];
  datePickerProps?: DatePickerProps;
}>;

export { DateRangeFilter as default };
