import { TooltipProps } from '@bigbinary/neetoui';
import React from 'react';

interface Time {
  h: number;
  m: number;
  s: number;
}
interface Devices {
  desktop: number;
  smartphone: number;
  [key: string]: number;
}
interface OperatingSystems {
  mac: number;
  windows: number;
  [key: string]: number;
}
interface Browsers {
  chrome: number;
  safari: number;
  [key: string]: number;
}
interface InsightsData {
  visitCount: number;
  startCount: number;
  submissionCount: number;
  completionRate: number;
  averageSubmissionTime: Time;
  devices: Devices;
  operatingSystems: OperatingSystems;
  browsers: Browsers;
}
interface TimePeriodValue {
  startDate: Dayjs;
  endDate: Dayjs;
  rangeType: string;
}
interface TimePeriod {
  label: string;
  value: TimePeriodValue;
}
interface HelpTexts {
  visitCount?: string;
  startCount?: string;
  submissions?: string;
  completionRate?: string;
  averageSubmissionTime?: string;
}
/**
 *
 * The Insights molecule displays key record insights, including a date range
 *
 * filter, offering a quick overview of user engagement in a user-friendly format.
 *
 * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/52269241/f733bf16-5d70-406d-9076-fd0e41c13bcd|height=200|width=300)
 *
 * @example 
 *
 * import Insights from "@bigbinary/neeto-molecules/Insights";
 * 
 * const DEFAULT_DATE_RANGE = {
 *   label: "All time",
 *   value: { startDate: null, endDate: null, rangeType: "all" },
 * };
 * 
 * const Summary = () => {
 *   const [timePeriod, setTimePeriod] = useState(DEFAULT_DATE_RANGE);
 * 
 *   return (
 *     <Insights
 *       {...{ setTimePeriod, timePeriod, isLoading }}
 *       showWarningMessage
 *       insightsData={{
 *         visitCount: 6,
 *         startCount: 6,
 *         submissionCount: 6,
 *         completionRate: 100,
 *         averageSubmissionTime: { h: 0, m: 11, s: 37 },
 *         devices: { desktop: 80, smartphone: 20 },
 *         operatingSystems: { mac: 40, windows: 40, android: 15, ios: 5 },
 *         browsers: { chrome: 60, safari: 30, opera: 10 },
 *       }}
 *       helpTexts={{
 *         averageSubmissionTime:
 *           "Average time updates only with time duration feature enabled.",
 *       }}
 *     />
 *   );
 * };
 * 
 * export default Summary;
 * @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 Insights: React.FC<{
  title?: string;
  tooltipProps?: Partial<TooltipProps>;
  insightsData: InsightsData;
  isLoading: boolean;
  timePeriod: TimePeriod;
  setTimePeriod: (timePeriod: TimePeriod) => void;
  helpTexts?: HelpTexts;
  showWarningMessage: boolean;
}>;

export { Insights as default };